vue-treeselect 懒加载获取数据

API:  https://vue-treeselect.js.org/

<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);
},


 

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值