vue中form和table标签过长

form标签过长

效果：

代码：

            
            

            
            

data里面：
isShowTooltip:false，

method里面：
method:{
//通过鼠标判断标签是否过长，通过注释打印语句，自己调试>=多少
    visibleTooltip(e){
      // console.log("值",e.target.offsetWidth + 18,e.fromElement.clientWidth,e.target.offsetWidth + 18 - e.fromElement.clientWidth >= 0 );
	    this.isShowTooltip = e.target.offsetWidth + 18 - e.fromElement.clientWidth >= -10 ? false : true;  //18为required *号引起的偏差。
    },
}

//过滤器，和method方法是同级别的
filters:{
    //如果长度大于五，就加...显示，如果没就正常显示
    message2(message){
      if(message.length>5){
          return message.substring(0,5)+'...';
      }
      return message;
    }
  },

 content是超长显示的内容，disabled是判断是否显示（鼠标放上去，tooltip是否显示全标签内容）

，mouseenter是method方法，判断标签是否超长，你可以根据注释的console.log()语句打印结果，选择适合的大小判断，|message2是过滤器，就是超长后，原表单显示的内容，

table标签过长

效果：

代码：

 

            

      

data里面：
isShowTooltip2:false,

method里面：
method:{
visibleTooltip2(e){
      // console.log("值",e.target.offsetWidth + 18,e.fromElement.clientWidth,e.target.offsetWidth + 18 - e.fromElement.clientWidth >= 0 );
	  this.isShowTooltip2 = e.target.offsetWidth + 18 - e.fromElement.clientWidth >= -90 ? false : true;  //18为required *号引起的偏差。
    },
}

//过滤器
filters:{
    message1(message){
      if(typeof message != "undefined"){
        if(message.length>5){
          return message.substring(0,5)+'...';
        }
      }
      return message;
    },
  },