我有一个同步循环得到的el-checkbox组,循环出来的数据有1,2,3,现在我需要默认禁用2,3,另外有一个固定的el-checkbox数据,当我点击这个数据的时候,我可以让默认禁用的两个值勾选,怎么实现当我
时间: 2024-05-16 09:13:42 浏览: 72
Vue动态生成el-checkbox点击无法赋值的解决方法
5星 · 资源好评率100%
点击固定的el-checkbox时,可以让默认禁用的两个值勾选呢?
可以使用v-model来绑定一个变量,来控制el-checkbox是否被选中,同时利用computed属性来实现对默认禁用2,3的控制。
示例代码如下:
```html
<template>
<div>
<el-checkbox v-model="checkAll" @change="handleCheckAll">{{ checkAll ? '取消全选' : '全选' }}</el-checkbox>
<br>
<el-checkbox-group v-model="checkedList">
<el-checkbox v-for="item in list" :key="item.value" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ label: '选项1', value: 1, disabled: false },
{ label: '选项2', value: 2, disabled: true },
{ label: '选项3', value: 3, disabled: true }
],
checkAll: false,
fixedCheckbox: false
}
},
computed: {
checkedList: {
get() {
return this.list.filter(item => !item.disabled).map(item => item.value)
},
set(val) {
this.list.forEach(item => {
item.disabled = val.indexOf(item.value) === -1
})
}
}
},
methods: {
handleCheckAll() {
this.checkedList = this.checkAll ? [1, 2, 3] : []
}
},
watch: {
fixedCheckbox(val) {
if (val) {
this.list.forEach(item => {
if (item.value === 2 || item.value === 3) {
item.disabled = false
}
})
} else {
this.list.forEach(item => {
if (item.value === 2 || item.value === 3) {
item.disabled = true
}
})
}
}
}
}
</script>
```
在上述代码中,我们使用了一个list数组来存储el-checkbox的数据,其中每个元素包括label、value、disabled三个属性,分别代表显示的文本、值和是否禁用。
使用v-model来绑定checkedList,利用computed属性来实现对默认禁用2,3的控制。在computed属性中,get方法返回可选项中未被禁用的值数组,set方法根据传入的值数组设置每个可选项的disabled属性。
在watch中监听fixedCheckbox变量的变化,当fixedCheckbox为true时,将默认禁用的2,3的disabled属性改为false,即可选中这两个选项。当fixedCheckbox为false时,将默认禁用的2,3的disabled属性改为true,即禁用这两个选项。
点击全选checkbox时,调用handleCheckAll方法,根据checkAll变量的值来设置checkedList数组,实现全选或取消全选的功能。
阅读全文