element-tree 实现部门-人员选择(支持ID相同)

心已赠人 2022-10-21 14:53 115阅读 0赞

## 使用element-tree实现id相同的选择 ##

1.  相同人员可在不同部门出现, 当勾选其中一个人员时,其它部门的相同人员也要勾选上
2.  右侧可进行删除已勾选人员, 并且树状图勾选状态取消
3.  若有勾选,进入时候默认选中

效果如下:  
例如: 点击勾选总经办的王五,技术部的王五也要勾选上,右侧删除王五的时候,左侧相关王五的勾选全部取消![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70]  
因为element-tree出现重复id的时候,会导致被覆盖,只能勾选中一个,  
解决方案: 修改element-ui tree的源码  
tree-store.js 文件 仿照源码增加了两个自定义的方法

export default class TreeStore { 
      constructor(options) { 
        this.currentNode = null;
        this.currentNodeKey = null; for (let option in options) { 
          if (options.hasOwnProperty(option)) { 
            this[option] = options[option];
          }
        }
    
        this.nodesMap = { };
        //mycode
        this.myNodesMap = []; this.root = new Node({ 
          data: this.data,
          store: this
        }); if (this.lazy && this.load) { 
          const loadFn = this.load; loadFn(this.root, (data) => { 
            this.root.doCreateChildren(data);
            this._initDefaultCheckedNodes();
          });
        } else { 
          this._initDefaultCheckedNodes();
        }
      }
    
    //mycode setMyChecked(data, checked, deep) { 
        const nodes = this.getMyNode(data); if (nodes && nodes.length > 0) { 
          for (let index = 0; index < nodes.length; index++) { 
            const element = nodes[index];
            let node = Object.values(element)[0]; if (node&&(node.checked!==checked)) { 
              node.setChecked(!!checked, deep);
            }
          }
        }
      }
    
    //mycode getMyNode(data) { 
        const key = typeof data !== 'object' ? data : getNodeKey(this.key, data);
        const result = this.myNodesMap.filter(item => item[key]);
        return result || [];
      }
    
    
      registerNode(node) { 
        const key = this.key;
        if (!key || !node || !node.data) return;
        const nodeKey = node.key;
        if (nodeKey !== undefined) this.nodesMap[node.key] = node; //mycode if (nodeKey !== undefined) { 
          this.myNodesMap.push({ 
            [node.key]: node
          });
        }
      }

tree.vue 文件增加自定义设置的方法

//mycode setMyChecked(data, checked, deep) { 
          this.store.setMyChecked(data, checked, deep);
        },

注意: 由于更改了依赖的源码 需要额外进行处理 我在这的处理方法是 : 将ele 的tree复制单独使用lib文件夹存放  
因为修改了依赖 使用了自定义的方法,直接改动依赖打印东西,是没有任何效果的,需要进行引入组件再打印

//代码有删减 <template> <div> <div class="distribution"> <div class="people"> <div class="search"> <el-input placeholder="请输入内容" v-model="filterText" clearable class="input-with-select" > <el-button slot="append" icon="el-icon-search" @click="filterNode"></el-button> </el-input> <el-button type="primary" class="refreshico" icon="el-icon-refresh-left" size="mini" @click="handleAsync" >同步数据</el-button> </div> <div class="tree"> <el-tree class="filter-tree" :data="depData" :props="defaultProps" default-expand-all highlight-current node-key="id" :expand-on-click-node="false" :filter-node-method="filterNode" @check-change="handleCheckChange" ref="tree" show-checkbox > </el-tree> </div> </div> <div class="selectPeople"> <div> <span class="selectText">已选员工</span> <div class="delAll" @click="delAll">清空</div> </div> <ul> <li v-for="(item, index) in selectList" :key="index"> <span>{ {  item.workDeptId }}</span>
                <div @click="handleDelSelect(item)">x</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="tree_btn">
          <el-button type="danger"  @click="handleCancel">取消</el-button>
          <el-button type="primary"  @click="save">确认</el-button>
        </div>
      </div>
    </template>
    
    <script>
    import ElTree from "@/lib//tree/src/tree.vue";
    import peopelList from './index.json'; export default { 
      props: ["selectUserIdList"], components: { 
        ElTree,
      }, data() { 
        return { 
          isDel: false, depData: [], checkedKeyList: [], selectList: [], defaultProps: { 
            children: "childrenDepartmentList",
            label: "workDeptId",
          }, distribution: false, agentConfigSuccess: false, queryParams: { },
          filterText:'',
        };
      }, methods: { 
        // 选择员工内的删除 handleDelSelect(data) { 
          this.$refs.tree.setMyChecked &&
            this.$refs.tree.setMyChecked(data, false, true);
        }, //去重,因为相同人员可以在不同部门出现,右侧进行渲染只渲染一个名字 unique(arr) { 
          const res = new Map();
          return arr.filter(
            (a) => !res.has(a.workDeptId) && res.set(a.workDeptId, 1) && a.type === 'user'
          );
        }, // 多选框选中 handleCheckChange(data, checked, indeterminate) { 
          //设置选择框状态
          data.id &&
            this.$refs.tree.setMyChecked &&
            this.$refs.tree.setMyChecked(data, checked, true);
    
          //右边渲染列表
          let workDeptIds = this.$refs.tree
            .getCheckedNodes()
            .filter((item) => item.id && item.childrenDepartmentList.length === 0);
          this.selectList = this.unique(workDeptIds);
        }, filterNode(value, data) { 
          if (!value) return true;
          return data.workDeptId.indexOf(value) !== -1;
        }, //因为我这里初始默认选中的数据结构和 部门列表的数据结构不一致,所以我进行了多一层处理 //将初始默认选中的数据传入进行过滤,将过滤成功的数据进行勾选并渲染 myFilter(value) { 
          let _this = this const traverse = function (node) { 
            const childNodes = node.root ? node.root.childNodes : node.childNodes; childNodes.forEach((child) => { 
              if(child.data.workDeptId === value){ 
                _this.$refs.tree.setMyChecked(child.data, true, true);
              }
              traverse(child);
            });
          };
          traverse(this.$refs.tree);
        }, // 取消 handleCancel() { 
          this.$emit("handleCancel", false);
          this.filterText = "";
          this.selectList = "";
          this.$refs.tree.setCheckedKeys([]);
        }, // 清空已选员工 delAll() { 
          this.selectList = [];
          this.checkedKeyList = [];
          this.$refs.tree.setCheckedKeys([]);
        }, save(){ 
          if(this.selectList.length){ 
            this.$emit('handleConfirm',this.selectList)
          }else{ 
            this.$message({ 
              showClose: true,
              message: '请选择员工',
              type: 'error'
            });
          }
        },
      }, watch: { 
          filterText(val) { 
            let data = { 
              userName:val.trim()
            }
            workServiceUser(data).then(res=>{ 
              if(res && res.data && res.data.length){ 
                res.data.map(item=>{ 
                  this.$refs.tree.filter(item);
                })
              }else{ 
                this.$refs.tree.filter(val);
              }
            })
          }, "selectUserIdList":{ 
            handler(){ 
              this.$nextTick(()=>{ 
                if(this.selectUserIdList && this.selectUserIdList.length){ 
                  this.selectUserIdList.map(item=>{ 
                    this.myFilter(item)
                  })
                }
              })
            }
          },
        },
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70]: /images/20221021/a039b4c7dadf4a68b9d05b3e3ebcd790.png