学习使用 Element UI 的 el-table 样式 show-overflow-tooltip当内容过长被隐藏时显示 tooltip

---

一、前言

Element UI 是一套基于 Vue.js 的开源 UI 组件库，提供了丰富的组件和样式，方便开发人员快速构建界面。其中，el-table 是 Element UI 中常用的表格组件之一。在 el-table 中，我们可以使用 show-overflow-tooltip 样式来处理内容超出部分的情况，并显示工具提示。

1.正文

1. 引入 Element UI：
   在你的 Vue 项目中，首先需要引入 Element UI，并确保已经正确安装和配置好了相关依赖。

2. 创建 el-table 组件：
   在你的 Vue 单文件组件中，使用 el-table 标签创建一个表格组件，设置相关的数据和列配置。

3. 添加 show-overflow-tooltip 样式：
   在需要处理内容溢出的 el-table-column 中，添加 show-overflow-tooltip 样式。show-overflow-tooltip 样式会使得超出部分的内容显示为省略号，并在鼠标悬停时显示工具提示。

   <el-table>
     <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
     <el-table-column prop="age" label="年龄" show-overflow-tooltip></el-table-column>
     <!-- 其他列配置 -->
   </el-table>
   

4. 自定义工具提示内容：
   默认情况下，工具提示会显示被截断的内容。但你也可以自定义工具提示的内容，以提供更多信息。通过设置 tooltip-content-scope 属性，并在对应列的 slot-scope 中编写自定义的工具提示内容。

   <el-table>
     <el-table-column prop="name" label="姓名" show-overflow-tooltip>
       <template slot-scope="{ row }">
         <el-tooltip class="item" effect="dark" :content="row.name" placement="top">
            <div class="custom-tooltip">{{ row.name }}</div>
         </el-tooltip>
       </template>
     </el-table-column>
     <el-table-column prop="age" label="年龄" show-overflow-tooltip></el-table-column>
     <!-- 其他列配置 -->
   </el-table>
   

   在上述代码中，我们使用了 el-tooltip 组件来包裹自定义的工具提示内容，将内容绑定到 row.name，并通过设置 class 和 placement 属性来调整工具提示的样式和位置。

2.总结：

通过使用 show-overflow-tooltip 样式，我们可以很方便地处理 el-table 中内容超出部分的情况，并利用工具提示提供更多信息。结合自定义工具提示内容的方式，我们能够灵活地控制工具提示的样式和显示内容。Element UI 提供了丰富的样式和组件，让我们能够更轻松地构建功能强大的界面。