183  
查询码:00001230
el-tree树的反选功能
作者: 徐文彬 于 2023年04月10日 发布在分类 / 人防组 / 人防前端 下,并于 2023年04月10日 编辑

el-tree树的反选功能

应用场景:当数据较多时,只想勾选几个不想要的数据,然后使用反选功能。
图例效果:上面的树组件选中了三级,下面的树组件会跟着反选。

粘贴图片


环境:vue2 + element-ui 2.15.9

代码

template部分

<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部分



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集合
    },
}




 推荐知识

 历史版本

修改日期 修改人 备注
2023-04-10 13:37:38[当前版本] 徐文彬 创建版本

 附件

附件类型

PNGPNG

  目录
    知识分享平台 -V 4.8.7 -wcp