el-table复选框悬浮提示
时间: 2023-07-08 21:49:28 浏览: 122
vue3 el-table多级表头收缩扩展的实现(JS原味版)
您可以通过在 `el-table` 组件中使用 `tooltip` 属性来实现复选框悬浮提示。具体步骤如下:
1. 在 `el-table-column` 组件中定义一个 `template` 来自定义复选框列的内容。
2. 在 `template` 中使用 `el-checkbox` 组件来渲染复选框,并添加 `:label` 属性绑定数据源中的唯一标识符。
3. 为 `el-checkbox` 组件添加 `v-tooltip` 指令来绑定提示文本,并在指令中使用 `slot-scope` 插槽来获取当前行的数据。
以下是示例代码:
```html
<el-table :data="tableData">
<el-table-column type="selection" width="55">
<template slot-scope="scope">
<el-checkbox :label="scope.row.id" v-tooltip="{content: '选中该项'}"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
在上面的示例代码中,当鼠标悬停在复选框上时,会显示一个提示文本“选中该项”。您可以根据实际需求来自定义提示文本。
阅读全文