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

效果

相关推荐
周不凢4 天前
elementui el-date-picker分页选择弹出框样式及分页样式
elementui
周不凢4 天前
elementui el-date-picker时间区间选择弹出框样式
elementui
桧***攮5 天前
DockerGraphQLAPI
elementui·rust·visual studio
滿7 天前
vue3 elementplus el-table toggleRowSelection使用方法
javascript·vue.js·elementui
鹤鸣的日常8 天前
Vue + element plus 二次封装表格
前端·javascript·vue.js·elementui·typescript
dy171711 天前
el-table表头上下显示内容
javascript·vue.js·elementui
一只小阿乐14 天前
vue3 使用v-model开发弹窗组件
javascript·vue.js·elementui
humors22114 天前
前端开发案例(不定期更新)
前端·vue.js·elementui·ruoyi·若依
阿奇__14 天前
el-table有固定列时样式bug
vue.js·elementui·bug
是大林的林吖17 天前
解决 elementui el-cascader组件懒加载时存在选中状态丢失的问题?
前端·javascript·elementui