element表格el-table自定义禁用的复选框添加提示el-tooltip
时间: 2023-08-05 11:05:57 浏览: 160
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
要在 element 表格的 el-table 组件中为自定义禁用的复选框添加提示,需要使用 el-tooltip 组件和 slot-scope 属性来实现。具体步骤如下:
1. 在 el-table 的 column 中,使用 slot-scope 属性来获取当前行的数据。
```
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 在这里添加禁用的复选框和提示 -->
</template>
</el-table-column>
```
2. 在禁用的复选框外层包裹一个 el-tooltip 组件,并通过 :content 属性将提示内容绑定为字符串或变量。
```
<el-table-column label="操作">
<template slot-scope="scope">
<el-tooltip :content="'该行数据不能编辑'">
<!-- 在这里添加禁用的复选框 -->
</el-tooltip>
</template>
</el-table-column>
```
3. 如果需要将提示内容绑定为变量,可以使用 v-bind 指令或简写的冒号语法来实现。
```
<el-table-column label="操作">
<template slot-scope="scope">
<el-tooltip :content="scope.row.tooltipContent">
<!-- 在这里添加禁用的复选框 -->
</el-tooltip>
</template>
</el-table-column>
```
通过以上步骤,就可以为 el-table 中的自定义禁用的复选框添加提示了。
阅读全文