Inverse selection function of el-tree tree

Inverse selection function of el-tree tree

Application scenario: When there is a lot of data, you only want to check a few unwanted data, and then use the inverse selection function.
Legend effect: the upper tree component has three levels selected, and the lower tree component will be inversely selected.
insert image description here

Environment: vue2 + element-ui 2.15.9

the code

template part

<el-tree
  :data="datatree"
   :props="defaultProps"
   show-checkbox
   ref="tree"
   node-key="rowGuid"
  @check-change="reversetreeFun"
 >
</el-tree>

<div>上面的树组件选中,下面树组件会相应的反选</div>

<el-tree
  :data="datatree1"
  :props="defaultProps"
  show-checkbox
  ref="inversetree"
  node-key="rowGuid"
>
</el-tree>

script part

data() {
return {
 defaultProps: {
        children: "children",
        label: "title"
      },
      datatree: [
            {
              title: "一级",
              rowGuid: '1',
              children: [
                {
                  title: "二级",
                  rowGuid: '11',
                  children: [
                    {
                      title: "三级",
                      rowGuid: '111'
                    },
                    {
                      title: "三级",
                      rowGuid: '112'
                    }
                  ]
                },
                {
                  title: "二级",
                  rowGuid: '12'
                },
                {
                  title: "二级",
                  rowGuid: '13'
                }
              ]
            }
          ],
      datatree1:[
            {
              title: "一级",
              rowGuid: '1',
              children: [
                {
                  title: "二级",
                  rowGuid: '11',
                  children: [
                    {
                      title: "三级",
                      rowGuid: '111'
                    },
                    {
                      title: "三级",
                      rowGuid: '112'
                    }
                  ]
                },
                {
                  title: "二级",
                  rowGuid: '12'
                },
                {
                  title: "二级",
                  rowGuid: '13'
                }
              ]
            }
          ],
      }
 }


methods: {
	batchSelect(nodes, refs, flag, seleteds) {
		if (typeof nodes != "undefined") {
			nodes.forEach((element) => {
				refs.setChecked(element, flag, true);
			});
		}
	
		if (typeof seleteds != "undefined") {
			seleteds.forEach((node) => {
				refs.setChecked(node, !flag, true);
			});
		}
	},
   reversetreeFun() {
        let reversetree = this.$refs.inversetree;
        this.datatree1 = this.datatree;
        let nodes = this.$refs.tree.getCheckedNodes(true, true)
        this.batchSelect(this.datatree1, reversetree, true, nodes);
        let firstTreeData = this.$refs["tree"].getCheckedKeys();
        // firstTreeData 为第一个树组件选中的数据id集合
        let secondTreeData = this.$refs["inversetree"].getCheckedKeys();
        // secondTreeData 为第二个树组件选中的数据id集合
    },
}


If you find it useful, give it a thumbs up

Guess you like

Origin blog.csdn.net/weixin_42255789/article/details/130055289