element tree动态设置默认选项与反选,反选无效问题

场景如图,数据结构是树形,页面组件分别是用面板和tree实现,一级是面板,二级是树,所以在数据绑定的时候,有点麻烦.感谢产品(=^ ^=)
面板绑定数据比较好操作,正是因为这里,导致了tree的数据处理起来比较麻烦,话不多说,上解决代码

                <el-collapse v-model="selectAn">
                  <template v-if="allGroupList && allGroupList.length > 0">
                    <el-collapse-item
                      v-for="(item, index) in allGroupList"
                      :key="index"
                      :name="index"    <-- 别忘了设置这个name,不然你就知道严重,
                      						用index赋值是为了方便取值 -->
                    >
                      <template slot="title">
                        <el-radio
                          v-model="searchForm.groupInfo[index]"
                          :label="item.cnId"
                        >
                          {{ item.name }}
                        el-radio>
                      template>
                      <el-tree
                        :ref="'eltree' + item.cnId"  <-- 这里很关键,因为是循环的 -->
                        :data="item.children"
                        show-checkbox
                        node-key="cnId"
                        :props="defaultProps"
                        :check-on-click-node="true"
                        :default-checked-keys="selectTwo"
                      >
                      el-tree>
                    el-collapse-item>
                  template>
                el-collapse>

上述的两个注意点,都是坑,我先踩为敬

js里的逻辑太多了,我就只贴关键处的代码,感兴趣的朋友可以私信我

selectTwo是tree的默认选中节点,是一个array

              if (item2 == item1[j].cnId) {
                var rf = 'eltree'+this.allGroupList[i].cnId;
                //让json数组对象的内容与新数组的内容作比较，相同的话，改变标记为false
                this.$refs[rf][0].setChecked(item2,false)
                flag = false;
              }

这里就知道ref如此的取值,长叹一口气.setChecked方法是官方提供,详情见文档.
setChecked这样才能有效的改变tree节点的选中状态,
通过改变selectTwo是没效果的,这个坑我也替各位踩了

补充一下,如果我这里只是单纯的tree组件,没有面板的话,处理起来是很简单的,
就用setChecked方法就能实现,
如果你们在实际场景中也是模板循环了多个tree,那么取值赋值用循环的方法即可

如果文章帮助到了您,麻烦您给文章点个赞,感谢了