vue使用element-ui中的table表格，实现某一列的文字超出规定字符显示省略号
程序员文章站
2022-03-07 21:57:25
第一步，判断渲染的字段是否超过规定字符实现这一步要用到作用域插槽，然后是参考table组件中自定义列的demo，就可以拿到el-popover 这一个组件，这一个组件的使用就是，你要做哪一段文字的提示，你就把那一段文字放进el-popover 这一个组件中，代码写的比较详细啦
第一步，判断渲染的字段是否超过规定字符
实现这一步要用到作用域插槽，然后是参考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中
这样就实现了，功能
但是还有很多可以优化的地方，本人才疏学浅，还请各位大佬，多多指点；
比如，判断是否超过规定字符时，我在插值表达式中，写了三元表达式，这样显的代码太冗余，
大佬有没有优化的方案，分享一下
本文地址：https://blog.csdn.net/weixin_49696014/article/details/111996588