el-cascader 动态加载后台数据

问题背景

        级联选择器有时包含数据过多，例如中国城市的级联选择等，如果一次性将数据全部请求过来的话，速度可能会比较慢，影响用户体验。所以就有了动态加载数据的需求，也就是用户点击一级选项后，再向后台发送该选项的子选择的请求（也就是懒加载子选项）

        对于我这个项目而言，我的需求就是用户先选择费用类型（一级），然后我根据费用类型来向后台请求具体类型的费用名称（二级）

效果如图

具体实现——vue2

• template

<el-cascader
           :props="props"//控制动态加载的配置
            v-model="addInfo.costName"//绑定的选项值
            style="width: 40%"
            placeholder="请选择费用名称"
            @change="handleSelectCost"//用户选择选项后的回调
            filterable
></el-cascader>

• script->data中和script->methods中

export default {
  data() {
    return{
         props: {
            lazy: true,
            lazyLoad: (node, resolve) => {
              // console.log(node);
              const { level } = node;

              if (level == 0) {
                this.getCostTypeOption(node).then((res) => {
                  resolve(res);
                });
              } else {
                this.getCostOption(node).then((res) => {
                  resolve(res);
                });
              }
            },
      },
    },
 methods: {

         // 获取费用类型
    getCostTypeOption(node) {
      return new Promise((resolve, reject) => {
        getCostType()
          .then((res) => {
            // console.log(res);
            if (res.code == 200) {
              let option = res.data.map((item) => {
                return {
                  label: item.name,
                  value: item.type,
                  leaf: node.level >= 1,
                };
              });
              // console.log(option);
              resolve(option);
            }
          })
          .catch((err) => console.log(err));
      });
    },
    // 获取费用名称选项
    getCostOption(node) {
      // console.log("parentType", node.value);
      return new Promise((resolve, reject) => {
        getCostname({ parentType: node.value }).then((res) => {
          if (res.code == 200) {
            let option = res.data.map((item) => {
              return {
                label: item.name,
                value: item.type,
                leaf: node.level >= 1,
              };
            });
            // console.log(option);
            resolve(option);
          } else reject("error");
        });
      });
    },
    // 选中费用名称-----------选中费用名称后立马查询该费用的单价
    handleSelectCost(val) {
      console.log(val);
    },
    }
}

lazy:true 标识启动懒加载

lazyLoad 来设置加载数据源的方法

node 就是当前选中的节点

resolve 为数据加载完成的回调(其实里面就是装你的下一级菜单)

level 从node解构赋值出来，表示当前处于第几级

若level为1，说明当前处于第一级，第一级不需要用户去点击触发（打开那个选择栏就能看到），所以我们要提前去获取选项，即调用获取费用类型的函数——getCostTypeOption(node)

level不为1，就说明用户点了选项需要获取二级菜单选费用名称，所以调用获取费用名称的函数—— getCostOption(node)

两个函数其实写的大同小异，这里就说说里面的共同点：处理获取数据时添加的leaf(label和value是选项的基本配置，所以不作赘述)，leaf的值为false：不是叶子节点，下面还有子节点；leaf值为true：是叶子节点，下面无子节点。这里我用leaf：node.level >= 1来控制leaf的值，原因在于我的选择器一共就两级，所以当level为1时就说明到达叶子节点了。