vue-treeselect 懒加载获取数据_treeselect load-options="loadoptions"堆栈-CSDN博客

本文链接：https://blog.csdn.net/weixin_43173924/article/details/105274117

<treeselect
  v-model="formData.organizationIdArr"
  :options="optionsArr"
  :load-options="loadOptions"
  :clearable="true"
  :searchable="true"
  @input="treeselectChange"
  placeholder="请选择"
/>

formData: {
  organizationIdArr: null
},
optionsArr: []

JS:
// 获取机构一级节点方法
    getLoadParentNode() {
      this.optionsArr = [];
      //当下拉树是单选的时候，绑定的值设为null，不能是‘null’或" "，只有这样，初始化的时候才不会出现unknown
      this.formData.organizationIdArr = null;
      let platformId = this.initLoginPlatformId;
      if (
        this.initLoginPlatformId === "" ||
        this.initLoginPlatformId === undefined ||
        this.initLoginPlatformId === null
      ) {
        platformId = this.formData.platformId;
      }
      const dataQueryOrgByRootOrg = {
        platformId: platformId,
        organizationId: []
      };
      orgManageApi
        .retrieveOrganizationList(dataQueryOrgByRootOrg)
        .then(response => {
          const organizations = response.data.organizations;
          let arr = [];
          organizations.forEach(item => {
            let objData = {};
            objData.id = item.organizationId;
            objData.label = item.name;
            objData.children = null;
            if (item.leaf === true) {
              delete objData.children; //有无子节点判断，树节点前面是否有箭头问题
            }
            arr.push(objData);
          });
          this.optionsArr = arr;
        })
        .catch(error => {
          console.log(error);
        });
 },
//懒加载机构子节点
    loadOptions({ action, parentNode, callback }) {
      console.log("action------", action);
      console.log(parentNode);
      const dataQueryOrgByRootOrg = {
        orgId: parentNode.id
      };
      orgManageApi
        .retrieveOrganizationListByFather(dataQueryOrgByRootOrg)
        .then(response => {
          let resData = response.data.childOrganization;
          let arr = [];
          resData.forEach(item => {
            let objData = {};
            objData.id = item.organizationId;
            objData.label = item.name;
            objData.children = null;
            if (item.leaf === true) {
              delete objData.children; //有无子节点判断，树节点前面是否有箭头问题
            }
            arr.push(objData);
          });
          console.log(arr);
          parentNode.children = arr;
          callback();
        })
        .catch(error => {
          console.log(error);
        });
},
treeselectChange(value, instanceId) {
  console.log(value);
},