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>
相关推荐
老华带你飞17 小时前
建筑材料管理|基于springboot 建筑材料管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习·spring
Gomiko17 小时前
JavaScript DOM 原生部分(二):元素内容修改
开发语言·javascript·ecmascript
一招定胜负17 小时前
网络爬虫(第三部)
前端·javascript·爬虫
Data_agent17 小时前
实战:用Splash搞定JavaScript密集型网页渲染
开发语言·javascript·ecmascript
Shaneyxs17 小时前
从 0 到 1 实现CloudBase云开发 + 低代码全栈开发活动管理小程序(13)
前端
半山烟雨半山青17 小时前
微信内容emoji表情包编辑器 + vue3 + ts + WrchatEmogi Editor
前端·javascript·vue.js
码途潇潇18 小时前
Vue 事件机制全面解析:原生事件、自定义事件与 DOM 冒泡完全讲透
前端·javascript
zmirror18 小时前
Monorepo 在 Docker 中的构建方案方案
前端
用户479492835691518 小时前
node_modules 太胖?用 Node.js 原生功能给依赖做一次大扫除
前端·后端·node.js
_Kayo_18 小时前
TypeScript 学习笔记2
前端·javascript·typescript