【vue】-Element-UI之Cascader 级联选择器动态获取数据渲染

根据element-ui提供的属性来实现

html

 <el-form-item label="活动分类">
     <el-cascader clearable placeholder="请选择活动分类"  v-model="classify_value" :key="refreshClassify" :props="classifyProps"  @change="handleChange"  ></el-cascader>
  </el-form-item>

data：

data() {
    return { 
      classify_value: null, //分类id
      refreshClassify: 0,
      classifyArr: [], //选项数据源
      //配置项
      classifyProps: {
        label: "name",
        value: "id",
        lazy: true,
        // checkStrictly: true,
        lazyLoad(node, resolve) {
          console.log("nodenodenodenode====>", node);
          const { value, level } = node;
          console.log("88888value,level=====>", level, value);
          setTimeout(() => {
            if (node.level == 0) {
              config.selectParentClassifyPg().then((res) => {
                if (res.data.success) {
                  const arrs = res.data.data ? res.data.data : [];
                  arrs.map((i) => {
                    return (i.id = i.classifyId);
                  });
                  resolve(arrs);
                }
              });
            }
            if (node.level == 1) {
              config.selectByParentId({ parentId: value }).then((res) => {
                if (res.data.success) {
                  const arrs = res.data.data ? res.data.data : [];
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(arrs);
                }
              });
            }
            if (node.level == 2) {
              config.selectByParentId({ parentId: value }).then((res) => {
                if (res.data.success) {
                  const arrs = res.data.data ? res.data.data : [];
                  resolve(arrs);
                }
              });
            } else if (node.level > 2) {
              resolve([]);
            }
          }, 100);
        },
      },
  
    
  },

methods：

  //活动分类 当选中节点变化时触发
    handleChange(val) {
      console.log(val, "this.classify_value===>",  this.classify_value );
      this.form.topClassifyId = this.classify_value[0]; 
    },

效果图：

选择后的效果：