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;
}

效果

相关推荐
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
凉豆菌14 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司14 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
可爱的秋秋啊1 天前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
宝拉不想努力了1 天前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
Dnn012 天前
修改el-select背景颜色
css·elementui·vue3
Aotman_3 天前
VUE Element-ui Message 消息提示组件自定义封装
前端·javascript·vue.js·ui·elementui·es6
serve the people4 天前
vue中将elementUI和echarts转成pdf文件
vue.js·elementui·echarts
tryCbest5 天前
Vue2集成ElementUI实现左侧菜单导航
前端·javascript·elementui