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>
相关推荐
卿·静4 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia17 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
ITKEY_20 分钟前
flutter日期选择国际化支持
开发语言·javascript·flutter
Mintopia20 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub23 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw26 分钟前
hippy的主要原理
前端
子兮曰28 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068829 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97632 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖32 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript