element ui 树形多选 提取id

// show-checkbox   单选时去掉
 <el-tree :props="props"
               :data="treeList"
               node-key="id"
               ref="tree"
               show-checkbox  
               :expand-on-click-node="true"
               @node-click="handleNodeClick"
               @check-change="save"></el-tree>
方法:  多选   所有的id    areaIdList 

  save () {
      const customerRangeId = this.$refs.tree
        .getCheckedNodes(true)    // 组件自带
        .map((item) => {
          let json = {
            id: item.id,
            fullName: item.fullName,
          };
          return json;
        });
      const areaIdList = customerRangeId.map((item, index) => {
        return item.id
      })
      this.$emit("insertAreas", areaIdList);
    },
方法   单选:提取选中父级及子集的id
  handleNodeClick (val) {
      let data = [val]
      let arr = [];
      function getIdFn (data) {
        data.forEach(item => {
          arr.push(item.id)
          if (item.hasOwnProperty("childrens")) {
            getIdFn(item.childrens)
          }
        })
        return arr
      }
      let res = getIdFn(data)
      this.$emit("insertAreas", res);
    },

 

posted @ 2022-03-25 14:01  bingxiaoxiao  阅读(464)  评论(0)    收藏  举报