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

学习使用 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 样式会使得超出部分的内容显示为省略号,并在鼠标悬停时显示工具提示。

    html 复制代码
    <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>
  1. 自定义工具提示内容:

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

    html 复制代码
    <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 提供了丰富的样式和组件,让我们能够更轻松地构建功能强大的界面。

相关推荐
安全方案1 小时前
精心整理-2024最新网络安全-信息安全全套资料(学习路线、教程笔记、工具软件、面试文档).zip
笔记·学习·web安全
士别三日&&当刮目相看1 小时前
JAVA学习*Object类
java·开发语言·学习
清风絮柳1 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维1 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
序属秋秋秋2 小时前
算法基础_基础算法【高精度 + 前缀和 + 差分 + 双指针】
c语言·c++·学习·算法
爱吃馒头爱吃鱼2 小时前
QML编程中的性能优化二
开发语言·qt·学习·性能优化
白夜易寒3 小时前
Docker学习之容器虚拟化与虚拟机的区别(day11)
学习·docker·容器
教练 我想学编程3 小时前
学习记录706@微信小程序+springboot项目 真机测试 WebSocket错误: {errMsg: Invalid HTTP status.}连接不上
spring boot·学习·微信小程序
星空寻流年3 小时前
css之定位学习
前端·css·学习