Element 级联选择器动态加载

前言

正常如果后端的同事直接把层级数据返回前端，那还是很容易使用的。但是有时候数据层级多，或者你的后端同事比较懒，你就只能通过动态加载的方式获取每一层级的数据。

实现

<el-cascader   v-model="form.stationId" :options="applyProcessList" :props="processProps"  clearable></el-cascader>

applyProcessList保存下拉列表数据，正常第一层级要么写死，要么通过接口获取，我这里是调用接口获取的。
applyProcessList是一个数组，数据格式是label和value的格式，如下：

this.applyProcessList = d.data.map(e => {
     return {
         value: e.id,
         label: e.stationName
     };
 });

processProps 配置属性，这个是data里的一个属性，

processProps: {
      // 设置父子节点取消选中关联，从而达到选择任意一级选项的目的
      checkStrictly: true,
      // 设置懒加载
      lazy: true,
      // 懒加载函数，用于获取数据
      lazyLoad (node, resolve) {
          //  console.log('节点：',node);
          that.$http.post(that.$pdmService + '/station/stationDesc/pageGradeList',{id: node.value})
              .then(({data: d}) => {
                  if(d.code == 0) {
                      const nodes = d.data.map(e => {
                          return {
                              value: e.id,
                              label: e.stationName
                          };
                      });
                      resolve(nodes);
                  }
              });
      }
  }

在lazyLoad里调用接口获取下一级数据，获取的数据是label和value的格式，最后将这个数组通过resolve返回