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>

运行结果

相关推荐
小爱丨同学39 分钟前
宏队列和微队列
前端·javascript
沉登c1 小时前
Javascript客户端时间与服务器时间
服务器·javascript
持久的棒棒君1 小时前
ElementUI 2.x 输入框回车后在调用接口进行远程搜索功能
前端·javascript·elementui
一 乐1 小时前
租拼车平台|小区租拼车管理|基于java的小区租拼车管理信息系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·微信·notepad++·拼车
小程xy4 小时前
react 知识点汇总(非常全面)
前端·javascript·react.js
寻找09之夏5 小时前
【Vue3实战】:用导航守卫拦截未保存的编辑,提升用户体验
前端·vue.js
非著名架构师5 小时前
js混淆的方式方法
开发语言·javascript·ecmascript
多多米10056 小时前
初学Vue(2)
前端·javascript·vue.js
敏编程6 小时前
网页前端开发之Javascript入门篇(5/9):函数
开发语言·javascript
看到请催我学习6 小时前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript