element Cascader 级联选择器 动态加载

• 效果图

  
  

网上千奇百怪的方法 但是极少用element官网提供的 好奇去看了下 果真动态加载的文档写的满含糊的 其实官网提供的实现起来很简单～

<template>
  <div>
    {{value}}
    <el-cascader :props="props" v-model="value" ref="department" clearable></el-cascader>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {
  getAllOrganizationTypeDepartment,
  getAllOrganizationInfoDepartment,
  getAllDepartmentInfo
} from "@/api/http/userModules";
@Component
export default class DepartmentManagement extends Vue {
  value = [];

  props = {
    lazy: true,
    lazyLoad(node: any, resolve: any) {
      const { level } = node;
      // 处理数据
      const handlerData = (res: any) => {
        if (res.data.length && res.code == 0) {
          resolve(
            res.data.map((val: any) => {
              return {
                value: val.id,
                label: val.name,
                leaf: level >= 2
              };
            })
          );
        }
      };
      if (level === 0) {
        getAllOrganizationTypeDepartment({
          fnRes: handlerData
        });
      } else if (level === 1) {
        const organizationTypeId = node.data.value;
        if (!organizationTypeId) return resolve();
        getAllOrganizationInfoDepartment({
          params: {
            organizationTypeId
          },
          fnRes: handlerData
        });
      } else if (level === 2) {
        const organizationId = node.data.value;
        if (!organizationId) return resolve();
        getAllDepartmentInfo({
          params: {
            organizationId
          },
          fnRes: handlerData
        });
      }
    }
  };
}
</script>

<style scoped lang="scss">
</style>

发请求的方法二次封装了 fnRes相对于axios(then)里面处理数据的函数