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>
相关推荐
0思必得02 分钟前
[Web自动化] Selenium获取元素的子元素
前端·爬虫·selenium·自动化·web自动化
不会敲代码15 分钟前
解密JavaScript内存机制:从执行上下文到闭包的全景解析
javascript
用户5757303346249 分钟前
🌟 从一行 HTML 到屏幕像素:浏览器是如何“画”出网页的?
前端
NEXT0611 分钟前
React Hooks 进阶:useState与useEffect的深度理解
前端·javascript·react.js
sure28217 分钟前
React Native应用中使用sqlite数据库以及音乐应用中的实际应用
前端·react native
CHU72903517 分钟前
扭蛋机盲盒小程序前端功能设计解析:打造趣味与惊喜并存的消费体验
前端·小程序
前端布道师22 分钟前
Web响应式:列表自适应布局
前端
ZeroTaboo24 分钟前
rmx:给 Windows 换一个能用的删除
前端·后端
哈里谢顿25 分钟前
Vue 3 入门完全指南:从零构建你的第一个响应式应用
vue.js
李剑一35 分钟前
Vue实现大屏获取当前所处城市及当地天气(纯免费)
前端