elementUI多级联动el-cascader动态加载数据实现

vue2+elementUI+webpack项目，由于业务需求，需要一个多级联动的省市区的选择搜索项，由此做了一个搜索的通用组件

一开始直接引入elementUI的el-cascader动态加载数据实现

<el-cascader :props="props"></el-cascader>

<script>
  let id = 0;

  export default {
    data() {
      return {
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

<template v-else-if="field.type === 10">
              <el-cascader
                clearable
                class="areaCityCascader"
                style="height: 28px; line-height: 28px; width: 220px"
                :props="cascaderProps"
                placeholder="省市区"
                v-model="filter[field.field_value]"
              ></el-cascader>
            </template>

 ====》我的代码实现 js

cascaderProps: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level, value } = node;
          setTimeout(async () => {
            let nodes = [];
            //接口获取省市区，省的level：1，市的level：2，区的level：3
            let res = await getProjectArea({
              level: level + 1,
              pid: level == 0 ? "" : value
            });
            this.optionCity = res.data;
            nodes = this.optionCity.map(item => ({
              value: item.id,
              label: item.name,
              leaf: level >= 2
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          });
        }
      },

这样实现后，只能选择完省市区才能实现选中搜索，这个还没有满足业务需求，进一步改造。

目前就实现三级联动，需要更多级联可自行修改。

 cascaderProps: {
        lazy: true,//开启懒加载数据
        checkStrictly: true,//是否严格的遵守父子节点不互相关联,选择任意一级选项数据
        lazyLoad(node, resolve) {
          const { level, value } = node;
          if (level < 3) {
            setTimeout(async () => {
              let nodes = [];
              let res = await getProjectArea({
                level: level + 1,
                pid: level == 0 ? "" : value
              });
              this.optionCity = res.data;
              nodes = this.optionCity.map(item => ({
                value: item.id,
                label: item.name,
                leaf: level >= 2
              }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            });
          } else {
            // 目前只有3联级动，所以最后一级联动加载时数据给个空数据。此处不给空数组会造成第三级数据点击时第三级数据后面会一直出现加载数据，影响外观
            resolve([]);
          }
        }
      },

接口封装

 /*通用接口
  三个参数：
   1 apiType: 接口方法 
   2 data:列表或详情传过来对象 
   3 params: 接口所需要额外参数

  */
  async commonInterface(apiType, data, params) {
    let objInterface = {
       //添加默认参数
    };
    let InterfaceParams = Object.assign(objInterface, params);
    let resp = await apiType(InterfaceParams);
    if (parseInt(resp.code) === 200) {
      Message({ type: "success", message: "操作成功!" });
      return resp.data;
    } else {
      return false;
    }
  },

使用：

import {
  patent_handle_revocation,
  get_revocation_node_list,
  order_close_out,
} from "@/ApiV2/Order/patent";

 let interfaceParams = {

      order_status: form.order_status,

      // is_reto: form.is_reto //是否重新走流程: 1 否 2 是

    };

    // 调接口

  await this.patentOtherEnter(patent_handle_revocation, data, interfaceParams)