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>

element官网示例代码。

在lazyLoad可以加上后端的异步请求。

一般会出现以下问题，请求出现两次的问题，数据出现重复。这种问题一般是的node 下的children 属性不为空自己又添加一遍造成的。自己仔细断点调试可以解决的。

还有就是数据回显的问题。

  <el-cascader
                v-if="showCascader"
                v-model="form.redHot"
                style="width: 100%"
                :props="props"
              >
              </el-cascader>

 data() {
    return {
               showCascader: false,

    };
  },

初始化的时候的隐藏级联选择器。一旦v-model 的值赋值完成之后的再将showCascader改成true。这就可以完成回显。

目前好像针对两级级联可以实现，多级级联存在问题。