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>
相关推荐
ProgramHan4 分钟前
十大排行榜——前端语言及要介绍
前端
Patrick_Wilson6 分钟前
你删过 lock 文件吗?聊聊包管理器迁移中 90% 的人会踩的坑
javascript·npm·前端工程化
早點睡3909 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-permissions
javascript·react native·react.js
氢灵子15 分钟前
Fixed 定位的失效问题
前端·javascript·css
英俊潇洒美少年21 分钟前
函数组件(Hooks)的 **10 大优点**
开发语言·javascript·react.js
haibindev34 分钟前
把近5万个源文件喂给AI之前,我先做了一件事
java·前端·c++·ai编程·代码审计·架构分析
方安乐1 小时前
Javascript工具库:classnames
开发语言·javascript·ecmascript
labixiong1 小时前
React Hooks 闭包陷阱:高级场景与深度思考
前端·javascript·react.js
颜酱1 小时前
回溯算法专项突破练习(1)
javascript·后端·算法
掘金者阿豪1 小时前
在AI时代,没有人是“只写一行代码的人”——我们为何都在被迫成为全栈?
vue.js·后端