element表格el-table只给禁用的复选框添加el-tooltip提示
时间: 2023-08-05 12:05:57 浏览: 463
您可以通过设置 `el-table` 的 `rowClassName` 属性来实现只为禁用的复选框添加 `el-tooltip` 提示。具体做法如下:
1. 在 `el-table` 中设置 `rowClassName` 属性,该属性可以是一个函数。
2. 在 `rowClassName` 函数中判断当前行数据是否禁用,如果是禁用的,则返回一个类名,否则返回空字符串。
3. 在 CSS 中定义该类名对应的样式,包括 `el-tooltip` 的样式。
下面是一个示例代码:
```html
<el-table
:data="tableData"
row-key="id"
:row-class-name="rowClassName"
>
<el-table-column
type="selection"
width="55"
:selectable="selectable"
>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
```js
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 20, disabled: false },
{ id: 2, name: '李四', age: 25, disabled: true },
{ id: 3, name: '王五', age: 30, disabled: false },
],
};
},
methods: {
selectable(row) {
return !row.disabled;
},
rowClassName({ row }) {
return row.disabled ? 'disabled-row' : '';
},
},
};
```
```css
.disabled-row .el-checkbox-disabled {
position: relative;
}
.disabled-row .el-checkbox-disabled:hover .el-tooltip {
visibility: visible;
}
.disabled-row .el-tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
visibility: hidden;
}
.disabled-row .el-tooltip__popper {
background-color: #303133;
color: #fff;
font-size: 12px;
padding: 6px;
white-space: nowrap;
}
```
在上面的代码中,我们在 `el-table` 中设置了 `row-class-name` 属性为 `rowClassName` 函数。在 `rowClassName` 函数中,我们判断当前行数据是否禁用,如果是禁用的,则返回 `disabled-row` 类名,否则返回空字符串。在 CSS 中,我们定义了 `disabled-row` 类名对应的样式,其中包括 `el-tooltip` 的样式。这样就可以只为禁用的复选框添加 `el-tooltip` 提示了。