element-Ui table只显示一行超出文字隐藏为...，鼠标移入显示所有内容。:show-overflow-tooltip=“true“，并设置弹出内容的宽度。

element-UI table文字超出一行，隐藏多余文字，移入显示tips。

今天写项目的时候想实现一个table单元格文字只显示一行文字，剩余显示为...的功能，发现:

:show-overflow-tooltip="true"

给el-table-column设置:show-overflow-tooltip="true"属性可以使单元格超出的内容自动折叠显示为...当鼠标移入时单元格的上方会弹出一个小tips来显示单元格得所有内容。

上代码：

<el-table
      :data="tableData"
      @cell-dblclick="copyText"
      border
    >
    <el-table-column
        v-for="(item,index) in bottomCol"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :show-overflow-tooltip="true" //前边一定要加 : 冒号否则报错
    >
     </el-table-column>
</el-table>

这样就成功了！

还有一个小问题

有时候因为table中的文字非常的多，而show-overflow-tooltip默认是把折叠的内容全部折叠为一行。那么当文字多的时候视觉体验就会变得比较差。

tips的class名为.el-tooltip__popper，开始我试着直接通过它class名来给tips设置样式。

<style lang="scss" scoped>
.el-tooltip__popper{
  max-width:20%
}
</style>

发现并没有效果，后来发现是因为scoped导致的。但是如果去掉scoped样式，那么这个组件的其他style样式就会影响到所有组件。所以我们需要新建一个style标签来修改tips的样式。

<style>
.el-tooltip__popper{
  max-width:20%
}
</style>

这样设置就可以生效了。