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

效果

相关推荐
web1309332039810 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
m0_7482548812 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
GDAL18 小时前
vue3入门教程:ref函数
前端·vue.js·elementui
博客zhu虎康1 天前
ElementUI 的 form 表单校验
前端·javascript·elementui
CodeChampion3 天前
60.基于SSM的个人网站的设计与实现(项目 + 论文)
java·vue.js·mysql·spring·elementui·node.js·mybatis
_不是惊风3 天前
el-table合并表头,表头第一个添加斜线
vue.js·elementui
毛毛三由3 天前
表单校验记录
前端·vue.js·elementui
_Feliz4 天前
vue2实现word在线预览
前端·javascript·vue.js·elementui·vue-office
Qlittleboy4 天前
vue的elementUI 给输入框绑定enter事件失效
前端·vue.js·elementui
Cachel wood5 天前
Vue.js前端框架教程14:Vue组件el-popover
前端·javascript·vue.js·python·elementui·django·前端框架