ElementUI使用tree-select加载部门树 发送请求的id值为部门id和子部门Id

1  页面添加tree-select  options为部门树数组

  <el-form-item label="部门：" prop="departId">

                <tree-select v-model="searchForm.departId" placeholder="请选择" :options="departTreeData">

                  <label slot="option-label" slot-scope="{ node }">

                    <svg class="icon">

                      <use :xlink:href="node.raw.data.type == 'user' ? (node.raw.data.sex == 2 ? '#icon-nvhai' : '#icon-nanhai') : '#icon-bumen'"                 />               </svg>

                    <span>{{ node.label }}</span>

                  </label> </tree-select> </el-form-item>

 

2

后台返回对象depart

[{id: "depart-100001",label: "XX科技有限公司",level: 1,parent: "depart-0"},

{id: "depart-100002",label: "XX信息咨询有限公司",level: 1,parent: "depart-0"},

{id: "depart-100003",label: "外部",level: 1,parent: "depart-0"},

{id: "depart-100011",label: "部门1",level: 2,parent: "depart-100001"},

{id: "depart-100012",label: "部门2",level: 2,parent: "depart-100001"},]

调用方法

 treeDataUtil.createUserTreeData(response.data.data);

处理后部门树对象值为

[{id: "depart-100001",label: "XX科技有限公司",level: 1,

data: {id: "depart-100001",label: "XX科技有限公司",level: 1,parent: "depart-0"},

children:[{id: "depart-100011",label: "部门1",data:{id: "depart-100011",label: "部门1",level: 2,parent: "depart-100001"}},

 

3处理后部门树对象值为

调用方法treeDataUtil.getDepertIdList

treeDataUtil文件内容
export default {
  createDepartTreeData(departList) {
    let departTreeData = [];
    for (let depart of departList) {
      this.setDepartTreeData(departTreeData, depart);
    }
    return departTreeData;
  },
  setDepartTreeData(departTreeData, depart) {
    if (depart.level == 2) {
      departTreeData.push({
        id: depart.id,
        data: depart,
        label: depart.name
      });
    } else {
      for (let target of departTreeData) {
        if (depart.parent == target.id) {
          if (!target.children) {
            target.children = [];
          }
          target.children.push({
            id: depart.id,
            data: depart,
            label: depart.name
          });
          break;
        }
        if (target.children) {
          this.setDepartTreeData(target.children, depart);
        }
      }
    }
  },
  createUserTreeData(userList) {
    let userTreeData = [];
    if (userList.length == 0) {
      return userTreeData;
    }
    let initLevel = userList[0].level;
    for (let user of userList) {
      this.setUserTreeData(userTreeData, user, initLevel);
    }
    return userTreeData;
  },
  setUserTreeData(userTreeData, user, initLevel) {
    if (user.level == initLevel) {
      userTreeData.push({
        id: user.id,
        data: user,
        label: user.label
      });
    } else {
      for (let target of userTreeData) {
        if (user.parent == target.id) {
          if (!target.children) {
            target.children = [];
          }
          target.children.push({
            id: user.id,
            data: user,
            label: user.label
          });
          break;
        }
        if (target.children) {
          this.setUserTreeData(target.children, user, initLevel);
        }
      }
    }
  },
  getUserIdList(selectUserIdList) {
    let userIdList = [];
    for (let userId of selectUserIdList) {
      if ((userId + "").split("-").length == 1) {
        userIdList.push(userId);
      }
    }
    return userIdList;
  },
  /*根据id获取所有子部门Id和自己Id*/
  getDepertIdList(arr, id) {
    var temp = []
    var forFn = function (list, id) {
      for (let target of list) {
        if (target.id === id) {
          temp.push(target.id.substr(target.id.lastIndexOf('-')+1) );
          if (target.children) {
            temp = getChildrenList(target.children, temp)
          }
          return temp;
        } else {
          if (target.children) {
            forFn(target.children, id)
          }
        }
      }
    }
    let   getChildrenList = function(arrChildren,newArr){
      for (let target of arrChildren) {
        newArr.push(target.id.substr(target.id.lastIndexOf('-')+1))
        if(target.children){
          getChildrenList(target.children,newArr);
        }
      }
      return newArr;
    }
    forFn(arr, id)
    return temp
  },
}

{id: "depart-100002",label: ""内催"",data:{id: "depart-100002",label: "内催",level: 1,parent: "depart-0"}},

{id: "depart-100003",label: "外部",data:{id: "depart-100003",label: "外部"",level: 1,parent: "depart-0"},}