el-table 设置内容超出宽度后省略,并添加tooltip
只需要在el-table-item
标签中添加属性 :show-overflow-tooltip="true"
例子
<template>
<div style="width:100%; display: flex; justify-content: center;">
<el-table :data="tableData" stripe style="width: 80%">
<el-table-column
prop="name"
label="Name"
min-width="180"
/>
<el-table-column
prop="content"
label="Content"
width="180"
:show-overflow-tooltip="true"
/>
</el-table>
</div>
</templa
<script>
export default {
name: 'EltableTest',
data() {
return {
tableData: [
{
name: '测试1',
content: '一二三四五六七八九十一二三四五六七八九十',
},
{
name: '测试2',
content: '一二三四五六七八九十一二三四五六七八九十',
},
{
name: '测试3',
content: 'Tom',
}
]
};
}
}
</script>