[vue]Element-plus中的table表格内容过多时的处理方法

环境：vue3 + element plus + typescript + vite


问题：


使用el-table显示数据时，有一个字段的数据太长，使表格样式很乱，然后，给列加了个固定宽度，之后行的高度又变得很高，也不好看。






目标效果：


对字符比较长的字段只显示部分，鼠标放上去再进行显示全部内容






解决方案：


在准备自己写字符串截取时，突然看到了一篇文章，发现el-table有一个属性，可以实现这个功能。


el-talbe中有一个show-overflow-tooltip 属性，作用是当内容过长被隐藏时显示 tooltip.


代码如下：

<el-table-column prop="couStaInfContent"
 label="内容"
 show-overflow-tooltip/>

对应的样式

<style lang="scss">
/* 全局样式表 */
/* elementui中table超出隐藏提示框宽度 */
.el-tooltip__popper {
  max-width: 200px;
}
</style>

注：如果是vite 项目样式不一样，参考下面代码

<style lang="scss" scoped>
:deep() {
  .el-popper {
    max-width: 200px !important;
  }
}
</style>