element show-overflow-tooltip 复制

el-table-column的show-overflow-tooltip弹出的提示无法复制,官方也暂时不准备解决,可以自己模拟一个

复制代码
<el-table-column label="支付单号" width="100">
    <template #default="{ row }">
        <el-tooltip :content="row.pay_sn" placement="top" dark="light">
            <div class="ellipsis">{{ row.pay_sn }}</div>
        </el-tooltip>
    </template>
</el-table-column>

增加一个样式

css 复制代码
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

效果

相关推荐
雪芽蓝域zzs2 天前
第十节:动态侧边栏菜单(根据路由 meta 自动渲染菜单)
javascript·vue.js·elementui
m0_579146657 天前
Element UI 表格合并单元格完全指南:从原理到实战
前端·vue.js·elementui
常宇佳9 天前
vue3 实战系列之踩过的一些坑
javascript·vue.js·elementui
aXin_ya11 天前
ElementUI (01):Vue2 项目引入 ElementUI使用
elementui·vue
山川志~12 天前
Vue + Element UI 实战:如何实现表格时间、金额字段排序
vue.js·ui·elementui
Sterting19 天前
Form表单与校验
javascript·vue.js·elementui
Sterting21 天前
Element-Plus 入门与整体布局
前端·vue.js·elementui
yume_sibai21 天前
Element Plus 基础组件完全指南(12个核心组件)
前端·elementui
di24k24k1 个月前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
森林的尽头是阳光1 个月前
tree回显问题
javascript·vue.js·elementui