Element 两颗树tree（一颗单选 一颗多选） 互斥选择

前言

在开发过程中，我们遇见流程审批，有些流程需要发送给不同部门人员，这里我使用的是树形结构进行人员选择，一颗为单选，一颗为多选，只能选择其中一条流程往下继续执行，请看演示视频

Video_2023-04-13_110320

---

html代码如下

	<div class="childTasks">
        <div v-for="(item, index) in approverList" :key="index">
          <p>{{ item.key }}</p>
          <el-tree v-if="item.status === '0'" :ref="item.nodeId" class="treeRadio" :data="item.treeList" show-checkbox check-strictly node-key="id" @check="handleClick($event,item)" />
          <el-tree v-else-if="item.status === '1'" :ref="item.nodeId" show-checkbox :data="item.treeList" node-key="id" @check="handleClick($event,item)" />
        </div>
    </div>

---

示例数据如下

 	approverList: [
        {
          key: "部门审批",
          nodeId: "department",
          status: "0",
          treeList: [
            {
              id: 1,
              label: "部门一",
              children: [
                {
                  id: 2,
                  label: "张三"
                },
                {
                  id: 3,
                  label: "李四"
                }
              ]
            },
            {
              id: 4,
              label: "部门二",
              children: [
                {
                  id: 5,
                  label: "王五"
                },
                {
                  id: 6,
                  label: "孙六"
                },
                {
                  id: 7,
                  label: "张八"
                },
                {
                  id: 8,
                  label: "小明"
                },
                {
                  id: 9,
                  label: "小谢"
                }
              ]
            }
          ]
        },
        {
          key: "领导审批",
          nodeId: "lead",
          status: "1",
          treeList: [
            {
              id: 10,
              label: "部门一",
              children: [
                {
                  id: 11,
                  label: "领导一"
                }
              ]
            },
            {
              id: 12,
              label: "部门二",
              children: [
                {
                  id: 13,
                  label: "领导二"
                },
                {
                  id: 14,
                  label: "领导三"
                }
              ]
            }
          ]
        }
      ],

处理函数如下

 	handleClick(data, item) {
 		const personList = []
     	if (item.status === '0') {
       		this.$refs[item.nodeId][0].setCheckedKeys([]); // 删除所有选中节点
        	this.$refs[item.nodeId][0].setCheckedNodes([data]); // 选中已选中节点
      	}	
      	personList = this.$refs[item.nodeId][0].getCheckedKeys(true)
      	this.approverList.forEach((e) => {
        	if (e.nodeId !== item.nodeId) {
          		e.nextUserIds = []
          		this.$refs[e.nodeId][0].setCheckedKeys([]);
        	}
      	})
      	return personlist
    },