【vue】-Element-UI之Cascader 级联选择器动态获取数据渲染
html<el-form-item label="活动分类"><el-cascader clearable placeholder="请选择活动分类"v-model="classify_value" :key="refreshClassify" :props="classifyProps"@change="handleChange"></el-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];
},
效果图:
选择后的效果:
更多推荐
已为社区贡献3条内容
所有评论(0)