el-table中选中一个checkbox其他行的checkbox置灰
时间: 2023-10-18 22:20:13 浏览: 143
Vue动态生成el-checkbox点击无法赋值的解决方法
5星 · 资源好评率100%
可以通过监听el-table中checkbox的变化,然后根据选中状态来控制其他行的checkbox的禁用状态。具体实现可以参考以下代码:
1. 在el-table中添加checkbox列,并设置v-model绑定选中的数据:
```html
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" v-model="selectedData"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
```
2. 在组件中监听checkbox的变化,根据选中状态来控制其他行的checkbox的禁用状态:
```javascript
export default {
data() {
return {
tableData: [
{ name: 'Tom', age: 20, gender: 'Male', disabled: false },
{ name: 'Jerry', age: 18, gender: 'Female', disabled: false },
{ name: 'Lucy', age: 22, gender: 'Female', disabled: false }
],
selectedData: []
}
},
watch: {
// 监听选中的数据变化
selectedData(newValue, oldValue) {
// 获取未选中的数据
const unselectedData = this.tableData.filter(item => !newValue.includes(item))
// 将未选中的数据的disabled属性设置为true或false
unselectedData.forEach(item => {
item.disabled = !!newValue.length
})
}
}
}
```
在上面的代码中,通过watch监听选中的数据变化,然后根据选中状态来控制其他行的checkbox的禁用状态。其中,通过`filter`方法获取未选中的数据,然后通过`forEach`方法遍历未选中的数据,将其`disabled`属性设置为`true`或`false`,从而控制其他行的checkbox的禁用状态。
阅读全文