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>

运行结果

相关推荐
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
wen's6 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim7 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim7 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心7 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络7 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
喜欢敲代码的程序员8 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
失落的多巴胺9 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5