最近项目需要一个动态禁用el-checkbox选项的功能,已经被选择过的项需要在“批量新增”的弹窗中禁用(禁用掉已经在列表中的“西安工厂”)
Element中只提供了
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
这里使用ES6的语法includes(),把已选择的列表id放入数组disabledStores中,其中store是为el-checkbox绑定数据的storeOptions中的值,store.id是数组中值的id,代码如下:
:disabled="disabledStores.includes(store.id)"
完整代码如下:
<el-checkbox-group v-model="checkedStores" @change="checkedStoresChange">
<el-checkbox v-for="store in storeOptions" :label="store" :key="store.id" :disabled="disabledStores.includes(store.id)" >{{store.name}}</el-checkbox>
</el-checkbox-group>
就这样,可以把已经添加到列表的值id,push进数组disabledStores中,动态禁用批量操作中checkbox多选框,防止数据被覆盖!