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

:show-overflow-tooltip=“true“ 移入显示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单元格中的内容特别多的话移入显示的这个tips就会超级长，视觉效果不好。比如这样，甚至更长。

我通过Chrome的控制面板找到这个tips的class名为： .el-tooltip__popper，开始我试着直接通过它class名来给tips设置样式。

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

这样写发现tips的css样式并没有生效。 查阅了之后发现是因为 scoped 导致的。但是如果去掉 scoped 的话，这个组件设置的其他css样式就会污染全局组件的css样式，所以要新建一个style来设置.el-tooltip__popper的样式。

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

这样就可以生效了！