elementUI关于checkgroup的一些坑

elementUI关于checkgroup不支持对象绑定的问题

今天在项目中遇到一个需求，就是动态渲染一个组合复选框使用的是elementUI里面的组件
上面是官网的一个例子，其中const cityOptions = [‘上海’, ‘北京’, ‘广州’, ‘深圳’];也暗示了选项的局限性，（不支持数组复杂类型的绑定）
项目中的需求肯定是复杂数据类型的渲染：label动态绑定id之类的下面就是我项目中解决的代码。
当我看见为什么会单独的const一个数组作为全选数组对象时就有疑惑了，直接用后台返回来的数组对象作为全选的数组不香吗？
然后我跟着自己的想法写就入了坑。。。
下面是我所用到的数据


下面是直接用后台返回的数组对象作为全选的数组，就会出现选项不激活的问题，具体就是误用了数组对象作为全选的数组，这样在点击全选之后会直接的赋值这个数组对象值但后面在选择其他后，后面又会增加一起checkbox的值，这样就会出现对应的项不激活的问题
handleCheckAllChange(val) { this.checkedList = val ? this.allAccountingList: []; this.isIndeterminate = false; },
下面才是正确的做法

注意1： 在渲染的时候使用后台返回的数组对象进行渲染checkgroup，之后你得单独创建一个纯数组如上图allAccountingCode（存选项ID或者其他标识，你得注意：label得对应绑定相应的值，因为选项激活对比的就是这个字段）用来激活选项，不然的话你会发现checkgroup选择的时候会偶现不激活，具体的原因你们可以自己每次打印checkedList的值就可以看出问题所在。
下面是关于这个组件的两个触发事件的代码：

elementUI与dialog嵌套所遇到的问题

**注意2：**其中还有一个问题就是我在dialog里面嵌套的复选框，要求是关闭dialog在打开的时候，这个checkList坑定要清空呀，我首先想到的是直接把它的length等于零就行了，然后在这里又踩了这个组件的另外一个坑。。。。即使被选中的checkList数组的length为零，你再次打开dialog以前被激活的仍然是激活的状态。这就比较令人很费解呀，还好后面查资料勉强解决了这个问题，但实在不推荐这个办法，但没办法暂时真想不出其他方法能解决。下面是我解决的代码：

 clearcheckedList() {//清空选择列表
                this.checkedList.length = 0 //这一步不能省
                console.log(this.checkedList)
                //强制更新数组 不建议但是在没找到合适的办法 checkboxgroup 遗留的坑
                this.$set(this.checkedList, 'checked', false)
            },

很重要的就是你得先把被选择的数组checkedList的长度改为零，后面在强制的更新这个数组改变它的checked属性，（不查资料还真不知道需要这么做！）。经过这些一系列的折腾之后，需求算是完成了。
以上就是我的一些心得，希望能帮助到一些开发类似功能的同学们！