el-table中show-overflow-tooltip属性未生效

末蓝、 2024-02-29 06:31 50阅读 0赞

#### **问题描述：** ####

使用 el-table 组件中的 show-overflow-tooltip 属性，目的是想让“描述”这一栏信息只展示一行，如果信息过长则在行尾增加省略号并且鼠标移至该单元格上时能够显示 tooltip，但是却没有起到作用，页面效果如下：

![84df7039ac6f423aa62fb03a9007e435.png][]

出现上面图片效果所对应的代码如下：

<el-table
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :data="tableData"
        :show-header="true"
        width="800px"
    >
        <el-table-column
            type="index"
            label="序号"
        ></el-table-column>
        <el-table-column
            label="姓名"
            prop="name"
        ></el-table-column>
        <el-table-column
            label="描述"
            prop="describe"
            show-overflow-tooltip
        ></el-table-column>
    </el-table>

#### **解决方案：** ####

给出以下三种方案都可以试一试，本人是最后一种方案才解决问题的。

##### 方案一 #####

如果该 vue 文件底部的样式标签 <style scoped></style> 中属性值用了 scoped，那么将其删除；

##### 方案二 #####

给加了 show-overflow-tooltip 的那一列设置定长宽度（增加 width 属性）：

<el-table-column
        label="描述"
        prop="describe"
        width="150px"
        show-overflow-tooltip
    ></el-table-column>

##### 方案三 #####

css 样式设置不对，在全局 css 文件中（我的项目中该文件名为 index.css，有的项目可能是 common.styl，根据自己实际的项目去找到该文件，找不到的话可以使用快捷键 Ctrl+shift+f 全局搜 .el-table 或 .cell 去定位文件）找到 .el-table .cell 这一栏，如下图所示，它有一个 white-space 属性，show-overflow-tooltip 未生效就是因为将该属性值设置为了 pre-line，我们只要将其值改为 nowrap 即可。

![27b60d69975f4fa48bb1e3879b6a6a6f.png][]

讲到这里就稍微普及一下 white-space 的基本说明：

white-space 属性是用来定义 css 元素内的空白处理方式。其值主要有以下六类：

normal： 忽略多余的空白，只保留一个空白（默认）；  
pre： 保留空白；  
nowrap： 只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止；  
pre-wrap： 保留空白符序列，正常地进行换行；  
pre-line： 合并空白符序列，保留换行符；  
inherit： 从父元素继承 white-space 属性的值。

#### **解决后的效果图：** ####

![226f79c563cd4ae4a93e2dbce313e4a2.png][]

[84df7039ac6f423aa62fb03a9007e435.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/29/9e371dc1c8a7435d8651d6efa5ad3815.png
[27b60d69975f4fa48bb1e3879b6a6a6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/29/92f1d78fd9714bfca60a1439c7e57141.png
[226f79c563cd4ae4a93e2dbce313e4a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/29/f57c601826b04b779b8955853f68fc74.png