溢出隐藏和hover时显示全部内容

vue中element提供了超出部分现实省略号然后鼠标hover的时候回显示内容的方法,

第一种:这种只能使用在el-table-column中,在展开列中不能用

// 关键点是 :show-overflow-tooltip="true"

           
 

这种的话,样式不太好看,如果长度过长会呲出表格,要在全局修改样式

        // 鼠标悬停时显示的样式(举个栗子)
        .el-tooltip__popper {
            max-width: 600px;
            color: #f5f7fa;
            line-height: 25px;          
          }

第二种:是写过滤器(这种指挥显示30个字符,超出会用省略号代替,却不会在hover的时候显示内容)

// 超出文本过滤器
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 30) {
        return value.slice(0, 30) + '......'
      }
      return value
    }
  }

// 在代码中引用