Cascader 级联选择器 - 动态加载

应用场景

电商后台里创建优惠券，指定那些分类可以使用此优惠券，分类为多选，分类层级最高3级

Element 样例

通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)，否则会简单的以有无子节点来判断是否为叶子节点。

// 当选中某一级时，动态加载该级下的选项

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

实际代码示例

• 选择任意一级选项 {checkStrictly: true}
• 多选 {multiple: true}

data(){
return {
    prop: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        multiple: true,
        checkStrictly: true
    }
}
},
method(){
    lazyLoad (node, resolve){
        if(node.level === 3){
                this.$message.warning('无子分类')
            } else {
                setTimeout(()=>{
                    this.getFloor(node, resolve)
                },500)
            }
    },
    getFloor (node,resolve){
          // 三级时不能点击调用
          // 调用接口，参数
            CategoryService.getFloorList(node.value ? node.value.categoryId : 0,node.level+1 ||1)
            .then(res=>{
                const nodes = res.map(item=>({
                    value: {categoryId: item.cid, title: item.name || item.selfName, level: item.level},
                    label: item.name || item.selfName,
                    leaf: node.level >=2
                }))
                resolve(nodes)
            }).catch(error=>{
                this.$message.error(error)
            })
    }
}