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>

运行结果

相关推荐
VOLUN1 分钟前
PageLayout布局组件封装技巧
前端·javascript·vue.js
掘金安东尼2 分钟前
React 的 use() API 或将取代 useContext
前端·javascript·react.js
anyup23 分钟前
🔥 🔥 为什么我建议你使用 uView Pro 来开发 uni-app 项目?
前端·vue.js·uni-app
蓝胖子的小叮当27 分钟前
JavaScript基础(十三)函数柯里化curry
前端·javascript
前端Hardy1 小时前
HTML&CSS:有趣的SVG路径动画效果
javascript·css
前端Hardy1 小时前
HTML&CSS:超酷炫的3D动态卡片
前端·javascript·css
江城开朗的豌豆2 小时前
我在项目中这样处理useEffect依赖引用类型,同事直呼内行
前端·javascript·react.js
听风的码2 小时前
Vue2封装Axios
开发语言·前端·javascript·vue.js
白嫖叫上我2 小时前
js如何循环HTMLCollection
javascript
cc_z2 小时前
vue代码优化
前端·vue.js