vue项目-el-table单元格内容过多时,显示省略号

1,900 阅读1分钟
问题解决方案:el-table单元格内容过多时显示省略号,鼠标悬停时显示全部内容

一、在vue项目中,使用el-table组件。由于单元格内容过多。会将单元格撑大。如图:

image.png

二、解决方法(两种)

1. 第一种方案

  • 在el-table上面增加代码tooltip-effect="dark"或者tooltip-effect="light"
  • 在el-table-column上面增加代码show-overflow-tooltip
// el-table中设置tooltip-effect属性
<el-table
    :data="resultData"
    border
    tooltip-effect="dark"
    style="width:100%"
>

// el-table-column上设置show-overflow-tooltip属性
<el-table-column 
    prop="PrjName"
    label="企业申报项目名称"
    width="70"
    show-overflow-tooltip
>
</el-table-column>

2. 第二种方案

  • 在el-table-column上面直接增加代码:show-overflow-tooltip="true"
<el-table-column 
    prop="PrjName" 
    label="企业申报项目名称" 
    width="70" 
    :show-overflow-tooltip="true"
>
</el-table-column>