el-table 设置内容超出宽度后省略,并添加tooltip

el-table 设置内容超出宽度后省略,并添加tooltip

只需要在el-table-item 标签中添加属性 :show-overflow-tooltip="true"

例子

html 复制代码
<template>
  <div style="width:100%; display: flex; justify-content: center;">
    <el-table :data="tableData" stripe style="width: 80%">
      <el-table-column 
        prop="name" 
        label="Name" 
        min-width="180" 
      />

      <el-table-column 
        prop="content" 
        label="Content" 
        width="180" 
        :show-overflow-tooltip="true" 
      />
    </el-table>
  </div>
</templa
js 复制代码
<script>
export default {
  name: 'EltableTest',
  data() {
    return {
      tableData: [
        {
          name: '测试1',
          content: '一二三四五六七八九十一二三四五六七八九十',
        },
        {
          name: '测试2',
          content: '一二三四五六七八九十一二三四五六七八九十',
        },
        {
          name: '测试3',
          content: 'Tom',
        }
      ]
    };
  }
}
</script>

运行结果

相关推荐
嘉琪00130 分钟前
前端数组核心方法(高级视角 + 场景 + 精简)——————2026 0309
开发语言·前端·javascript
颜酱1 小时前
二分图核心原理与判定算法
javascript·后端·算法
Lee川1 小时前
从“DOM 操作”到“数据驱动”:Vue 如何重塑前端开发思维
前端·vue.js
sibylyue1 小时前
Typescritpt、ES6
前端·javascript·vue.js
用户3076752811271 小时前
《拒绝卡顿:深入解析 AI 流式 Markdown 的高性能渲染架构》
前端·javascript
Mertens18741 小时前
Zero-Doc:极简的 Spec Coding 落地指南
前端·javascript·ai编程
ZengLiangYi1 小时前
用 1300 行原生 JS 做了一个 Chrome DevTools 扩展,让前后端不再为接口报错截图扯皮
前端·javascript
sxq1 小时前
Flow Render: 像调用异步函数一样渲染 UI 组件
vue.js·react.js
A_Qyp1 小时前
JeechBoot前端表格内操作设置下拉
前端·javascript
小小程序员mono2 小时前
JS 与 Vue Router 导航方式对比
开发语言·javascript·vue.js