el-table 自定义tooltip
时间: 2023-11-11 18:57:46 浏览: 193
vue3 el-table多级表头收缩扩展的实现(JS原味版)
要在el-table中自定义tooltip,可以使用scoped slot来实现。scoped slot允许我们自定义el-table的每一列的内容,并且可以在其中添加tooltip。
首先,在el-table-column中添加一个scoped slot,命名为"tooltip"(或其他你喜欢的名字)。然后,在该scoped slot中,可以使用el-tooltip组件来包裹要显示的内容,并设置相关的属性。
以下是一个示例代码:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="Name">
<template slot-scope="scope">
<div class="cell-content" v-tooltip>
{{ scope.row.name }}
<el-tooltip effect="dark">
<div slot="content">
Custom Tooltip Content
</div>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
```
在上面的示例中,我们为el-table-column添加了一个scoped slot,并在该slot中使用了el-tooltip组件。在这个示例中,tooltip的内容为固定的"Custom Tooltip Content"。
你可以根据需要在slot中自定义tooltip的内容和样式。
阅读全文