iview级联选择器懒加载

最新推荐文章于 2023-06-19 18:03:00 发布

薯条元宝

最新推荐文章于 2023-06-19 18:03:00 发布

阅读量304

点赞数

文章标签： view design html javascript

本文链接：https://blog.csdn.net/m0_73490383/article/details/130585465

版权

html:

 <Cascader
      :data="data.treeData"
      v-model="selectVal"
      :load-data="loadData"
      @on-change="getNode"
      change-on-select
      style="width: 100%"
      ref="cascader"
      placeholder="请选择代码目录"
      @on-visible-change="visibleChange"
      clearable
    ></Cascader>

js:

const visibleChange = (visible) => {
  if (visible) {
    data.treeData = [];
    let codeTreeData = getCodeTreeData.value.filter(
      (item) => item.type == "folder"
    );
    codeTreeData.forEach((item) => {
      data.treeData.push({
        label: item.name,
        value: item.id,
        loading: false,
        children: [],
      });
    });
  }
};
const loadData = (item, callback) => {
  item.loading = true;
  loadChildFolder(item, () => {
    // debugger;
    let children = item.children || [];
    if (children.length === 0) {
      delete item.children;
      delete item.loading;
    }
    for (let child of children) {
      loadData(child, callback);
    }
    callback();
  });
};

const loadChildFolder = (item1, callback) => {
  item1.children = [];
  let path = proxy.GlobalUrl.ANALYSIS.GETDIRDATA;
  let params = {
    projectId: window.localStorage.getItem("projectId"),
    itemId: item1.value,
  };
  proxy.http.get(path, params).then((resault) => {
    if (resault.data.code === 0) {
      item1.loading = false;
      let data = resault.data.data.directoryList;
      if (data.length > 0) {
        data.forEach((item) => {
          let tempData = {
            label: item.name,
            value: item.id,
            loading: false,
            children: [],
          };
          if (item1.children) {
            item1.children.push(tempData);
          }
        });
        callback();
      } else {
        delete item1.children;
        delete item1.loading;
      }
    }
  });
};