Ant Design Vue的cascader级联组件动态加载数据，不同类型获取不同接口，二级和三级

lee754922002_

已于 2024-04-08 18:00:50 修改

阅读量609

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-04-08 15:17:01 首次发布

本文链接：https://blog.csdn.net/lee754922002_/article/details/137509115

版权

文章介绍了在Vue应用中，如何使用Cascader组件实现异步加载患者类型数据的功能，通过`loadData`方法根据选择的层级动态调用接口获取不同级别的组织列表。

摘要由CSDN通过智能技术生成

不同类型，异步获取数据，患者类型没有三级。

<a-cascader
 v-model="itemType"
 :load-data="loadData"
 change-on-select
 class="input-width"
 :options="ItemTypeOptions"
  placeholder="请选择"
   @change="handleSelectItemType"
/>


ItemTypeOptions = [
    {
      value: 1,
      label: '患者',
      isLeaf: false
    },
    {
      value: 2,
      label: '标本',
      isLeaf: false
    },
    {
      value: 3,
      label: '物品',
      isLeaf: false
    },
  ];



async loadData(selectedOptions) {
    console.log(selectedOptions)
    const targetOption = selectedOptions[selectedOptions.length - 1];
    this.levelIndex = selectedOptions.length+1
    const type = selectedOptions[0].value
    targetOption.loading = true;
  // setTimeout(() => {
    if(selectedOptions.length<2){
      await this.getItemTypeList(targetOption.value,type);//这个方法是掉接口，二级数据
    }else{
      await this.getItemTypesList(targetOption.value,type);//这个方法是掉接口，三级数据
    }
    targetOption.loading = false;
    if(this.levelIndex<=3){
      targetOption.children = this.roleTwoList;
    }
    this.ItemTypeOptions = [...this.ItemTypeOptions];
    // }, 1000);
  }
   
  //根据父id获取2级组织列表
  async getItemTypeList(id,type){
    console.log(this.levelIndex==3||type==1)
    try {
      // let par={
      //   parentId:id
      // }
      // const res = await getOrgOneList(par)//掉接口，获取下一层级数据
      this.roleTwoList=[]
      const query = {
        pageNum: 1,
        pageSize: 1000,
        attributeType: id,
      }
      await transportApi.getTransportTypeList(query).then(res => {
        res.data.list.forEach(item=>{
          let temp={
            value:item.id,
            label:item.typeName,
            isLeaf: this.levelIndex==3||type==1?true:false//判断是否是叶子节点
          }
          this.roleTwoList.push(temp)
        })
      });
      
    } catch (error) {
      console.log(error)
    }
  }
  //根据父id获取3级组织列表
  async getItemTypesList(id,type){
    try {
      this.roleTwoList=[]
      const query = {
        pageNum: 1,
        pageSize: 1000,
        typeId: id,
        current: 1
      }
      if(type==2){
        await transportApi.getTransportSampleList(query).then(res => {
          res.data.list.forEach(item=>{
            let temp={
              value:item.id,
              label:item.name,
              isLeaf: this.levelIndex==3?true:false//判断是否是叶子节点
            }
            this.roleTwoList.push(temp)
          })
        });
      }else{
        await transportApi.getTransportGoodsList(query).then(res => {
          res.data.list.forEach(item=>{
            let temp={
              value:item.id,
              label:item.name,
              isLeaf: this.levelIndex==3?true:false//判断是否是叶子节点
            }
            this.roleTwoList.push(temp)
          })
        });
      }
    } catch (error) {
      console.log(error)
    }
  }