ElementUi之Cascader 级联选择器el-cascader（异步获取数据源，lazyLoad）

级联选择器el-cascader（异步获取数据源，lazyLoad）

官网地址：https://element.eleme.cn/#/zh-CN/component/cascader

省市区三联用法
data中调用methods中方法需再create时声明_that=this;_that（自己定义名字),放到export外部；

var _that;
export default {

 props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const {
              level
            } = node;
            let nodes = [];
            //判断当前node是否携带data数据，无数据则父级id为null否则对parentId 赋值
            let parentId = node.data ? node.data.id : null;
            let levels = '';
            switch (level) {
              case 0:
                levels = 'province';
                break;
              case 1:
                levels = 'city';
                break;
              case 2:
                levels = 'district';
                break;
              case 3:
                levels = 'street';
                break;
            }
            _that.getArea(levels, parentId).then(res => {
              nodes = res;
              resolve(nodes);
            });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成

          },
        },

methods:{
//传入父级id及level，
async getArea(level, parentId) {
        let data = {
          level: level,
          parentId: parentId
        }
        let select = [];
        await getDistrict(data).then(res => {
          res.rows.forEach(item => {
            item.value = item.adcode;
            item.label = item.name;
            item.leaf = data.level == 'street' ? true : false;
          })
          select = res.rows;
        })
        return select;
      },
}

其他需分三级或多级数据量大时使用同上，数据结构都差不多