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

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

// 关键点是 :show-overflow-tooltip="true"
<el-table-column label="项目规模" sortable :show-overflow-tooltip="true">
           <template slot-scope="scope">{{scope.row.item_scale }}</template>
 </el-table-column>

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

        // 鼠标悬停时显示的样式(举个栗子)
        .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
    }
  }

// 在代码中引用
<el-table-column label="项目名称" sortable >
      <template slot-scope="scope">{{scope.row.item_name | ellipsis}}</template>
 </el-table-column>

——————————————————————————————————————————————————————————
再说一点，从dom树上来看el-tooltip它不在你container里面

所以要修改样式的话，就不能在container里面改，并且要去掉scope，最好自己定义一个类名。防止影响其它地方