ElementUI的el-checkbox-group插件,动态禁用el-checkbox项

最近项目需要一个动态禁用el-checkbox选项的功能,已经被选择过的项需要在“批量新增”的弹窗中禁用(禁用掉已经在列表中的“西安工厂”)


ElementUI的el-checkbox-group插件,动态禁用el-checkbox项_第1张图片
image.png

Element中只提供了


  {{city}}

这里使用ES6的语法includes(),把已选择的列表id放入数组disabledStores中,其中store是为el-checkbox绑定数据的storeOptions中的值,store.id是数组中值的id,代码如下:

:disabled="disabledStores.includes(store.id)"

完整代码如下:


    {{store.name}}

就这样,可以把已经添加到列表的值id,push进数组disabledStores中,动态禁用批量操作中checkbox多选框,防止数据被覆盖!

(注释:在ES5,Array已经提供了indexOf用来查找某个元素的位置,如果不存在就返回-1,但是这个函数在判断数组是否包含某个元素时有两个小不足,第一个是它会返回-1和元素的位置来表示是否包含,在定位方面是没问题,就是不够语义化。另一个问题是不能判断是否有NaN的元素。)

你可能感兴趣的