vue +element 中表格多选框禁用
时间: 2023-11-24 11:08:06 浏览: 152
在Vue + Element中,我们可以通过设置多选框的prop属性来禁用多选框。在表格的column中添加一个selection-column,并在column中定义selection-column的props。具体做法如下:
1. 在table的column中添加一个selection-column,代码如下:
```
<el-table-column type="selection" width="55">
</el-table-column>
```
2. 在selection-column中定义props:disabled。disabled是一个函数,它返回一个Boolean值,表示当前行的多选框是否被禁用。我们可以根据需要在disabled函数中进行判断,如果当前行满足禁用条件,则返回true,否则返回false。具体代码如下:
```
<el-table-column type="selection" width="55" :selectable="selectable">
</el-table-column>
...
methods: {
// 定义一个函数,用于判断当前行的多选框是否应该被禁用
selectable(row, index) {
// 根据需要进行判断,如果当前行满足禁用条件,则返回false
// 否则返回true
return row.enableSelect;
}
}
```
在上面的例子中,selectable函数用于判断当前行是否应该被禁用。如果当前行的enableSelect属性为true,则返回true,否则返回false。在selection-column中使用:selectable="selectable"来绑定selectable函数。
这样就可以根据需要禁用表格中的多选框了。
阅读全文