vue使用element-ui中的table表格，实现某一列的文字超出规定字符显示省略号

第一步，判断渲染的字段是否超过规定字符

实现这一步要用到作用域插槽，然后是参考table组件中自定义列的demo，就可以拿到
el-popover 这一个组件，这一个组件的使用就是，你要做哪一段文字的提示，你就把那一段文字放进el-popover 这一个组件中，代码写的比较详细啦

<el-table-column label="公司部门">
          <!-- 利用了作用域插槽，自定义了“公司部门”这一列 -->
	<template slot-scope="scope">
            <el-popover popper-class="area_popper" offset=-150 trigger="hover" :open-delay=0 :close-delay=0 placement="top" :disabled='isShowBox'>
                <!-- 提示的文字框，显示所有的部门信息 -->
                <p class="showText">{{ scope.row.corporate_sector }}</p>
                <!-- 利用三元表达式判断是否超过预期的长度 -->
                <div slot="reference" v-on:>{{ scope.row.corporate_sector.length > 20? scope.row.corporate_sector.slice(0, 20) + '...' : scope.row.corporate_sector}}</div>
            </el-popover>
	</template>
</el-table-column>

第二步，当鼠标经过时，判断是否要显示提示的信息

其实这一步就是，当鼠标经过这个字段时，要判断，该字段的长度是否超过规定的字符，超过的话，鼠标经过该字段，显示提示信息，没有超过该字段，不显示提示信息

<el-table
        :data="rosterList"
        :header-cell-style="getRowClass"
        @cell-mouse-enter="showBox"
        @cell-mouse-leave='hideBox'
        style="width: 100%"
        stripe
      >
 </el-table>

@cell-mouse-enter=“showBox”
@cell-mouse-leave=‘hideBox’ 要用到这两个事件，一个是鼠标某个单元格触发的事件，一个是鼠标离开某个单元格触发的事件，对应的处理函数代码如下：

// 鼠标经过显示盒子
    showBox: function (row, column, cell, e) {
      
      if(cell.cellIndex === 3 && e.target.innerText.length >= 20){
       this.isShowBox = false

      }
      else{
        this.isShowBox = true
        }
    },
    // 鼠标离开隐藏盒子
    hideBox:function(row, column, cell, e){
      this.isShowBox = true
    }

:disabled=‘isShowBox’ 就是控制提示框是否要显示，这个属性，要定义到data中
这样就实现了，功能
但是还有很多可以优化的地方，本人才疏学浅，还请各位大佬，多多指点；
比如，判断是否超过规定字符时，我在插值表达式中，写了三元表达式，这样显的代码太冗余，
大佬有没有优化的方案，分享一下