element级联选择器懒加载和搜索功能

Question

项目碰到一个需要搜索功能的级联选择器
汽车品牌 >车系>车型
输入汽车品牌名称 可以选择一级数据 然后根据一级选二级 然后三级

Answer 1

看一下官网给的这一个案例，依照其变更一下即可实现懒加载的效果

<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>