【项目复盘vue2+ts】el-table某些列多行文本超过多少行显示...并且鼠标移入能显示文本全部

效果图

效果：el-table中某几列文本过长，又不想用el-tooltip显示全部。涉及区域列文本超过两行显示...，涉及部门列文本超过三行显示...，鼠标移入时用html原生标签的title属性可以显示该单元格全部文本内容

实现思路：

1.判断溢出需要显示...的列，用v-if + slot-scope做处理

2.鼠标移入显示全部文本需要用到html的title属性

3.computed动态绑定css

<el-table-column v-for="item in tableProps" :key="item.prop" :prop="item.prop" :label="item.label" align="center">
        <template slot-scope="scope">
          <div v-if="item.label === '涉及区域' || item.label === '涉及部门'"
               :title="scope.row[item.prop] ? scope.row[item.prop] : ''"
               :class="isEllipsis(item)">
            {
   
   { scope.row[item.prop] }}
          </div>
          <div v-else>
            {
   
   { scope.row[item.prop] }}
          </div>
        </template>
</el-table-column>

<script lang="ts">
import Vue from 'vue'
import { Component, Ref } from 'vue-property-decorator' // 引入装饰器
 
// 在Vue2的ts里面在方法前面写get就是计算属性
get isEllipsis() {
    return function (item:any) {
      let className:string[] = []
      if(item.label === '涉及部门') {
        className = ['overflow_text', 'text_hidden_3'] // 涉及部门是溢出3行显示...
      } else if (item.label === '涉及区域') {
        className = ['overflow_text', 'text_hidden_2'] // 涉及区域是溢出2行显示...
      }
      return className
    }
 }
</script>

css：

.overflow_text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text_hidden_3 {
  -webkit-line-clamp: 3;
}
.text_hidden_2 {
  -webkit-line-clamp: 2;
}