el-table表格中数据过长如何使用省略号

前提问题: 当表格中某一个数据过长,不需要气泡提示,需要省略号显示
解决过程: 使用el-table时,el-table-column自带show-overflow-tooltip属性可以将不完全展示的内容通过气泡提示进行展示:show-overflow-tooltip="true",当数据过长,并要求不使用气泡提示,且不完全展示,使用省略号时需要将已经拿到的字段内容,使用插件进行单独处理
解决结果:

复制代码
<el-table-column
    prop="responseData"
    label="日志消息"
    :show-overflow-tooltip="false"
>
    <template #default="scoped">
        <span
            :title="scoped.row.responseData"
            style="
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    white-space: pre-line;
                "
         >
                {{ scoped.row.responseData}}
        </span>
    </template>
</el-table-column>
相关推荐
下位子2 分钟前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒2 分钟前
Vue单文件组件到底需不需要写name
前端·vue.js
用户47949283569153 分钟前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影3 分钟前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天5 分钟前
CSS 属性值的计算与过程
前端
云鹤_5 分钟前
【Amis源码阅读】组件注册方法远比预想的多!
前端·低代码
xinfei7 分钟前
ES6 新特性 从 ECMAScript 2015(ES6)到 ECMAScript 2025
前端
GBVFtou10 分钟前
vue响应式 track 和trigger 过程
前端
耀耀切克闹灬18 分钟前
生成tag号的脚本
前端
Never_Satisfied21 分钟前
在JavaScript / HTML中,line-height是一个CSS属性
javascript·css·html