element plus el-table 组件每行过长通过 tooltip 显示
时间: 2023-10-08 09:04:38 浏览: 61
要实现在 `el-table` 组件的每行过长内容上显示 tooltip,您可以通过使用 `formatter` 属性来自定义单元格的内容,并在其中使用 `el-tooltip` 组件来包裹需要显示的内容。
以下是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" :formatter="formatName"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John Doe', age: 30 },
{ name: 'Jane Smith', age: 25 },
// 其他数据行...
],
};
},
methods: {
formatName(row) {
if (row.name.length > 10) {
return `<el-tooltip effect="dark" content="${row.name}" placement="top">
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${row.name}</div>
</el-tooltip>`;
}
return row.name;
},
},
};
</script>
```
在上面的示例中,我们自定义了 `formatName` 方法作为 `el-table-column` 的 `formatter` 属性的值。在这个方法中,我们判断了 `name` 字段的长度是否超过了一定的限制(这里设定为10个字符),如果超过了,则返回一个包含了 `el-tooltip` 组件的字符串,将超过限制的内容显示为 tooltip 的形式,同时使用 CSS 控制文字溢出时的省略号显示。如果没有超过限制,则直接返回原始的 `name` 值。
希望这个示例对您有所帮助!如有任何疑问,请随时提问。