element-UI的 Cascader 级联选择器 动态加载数据及回显
·

<template>
<!-- 测试懒加载 -->
<el-cascader :props="test_props" :options="test_options" v-model="test_model"></el-cascader>
</template>
<script>
let id2 = 0;
export default {
name: 'TestView',
data() {
return {
test_options: [
//回显值得关键必须要把需要回显的都写到options里面,且最后一项要加上leaf:true,表示无下级了才可以回显;这里写死,实际要根绝接口返回的需要回显的数据,来递归循环到结果,赋值给这里;
],
test_model: ['选项1', '选项3'], //模拟后台取到的默认值,这里是单选
test_props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: 2 }).map((item) => {
++id2;
return {
id: 1,
value: `选项${id2}`,
label: `选项${id2}`,
leaf: level >= 1
};
});
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}, 1000);
}
}
};
},
created() {
setTimeout(() => {
this.test_options = [
{
value: '选项1',
label: '选项1',
id: 2,
leaf: false,
children: [{ value: '选项3', label: '选项3', leaf: true }]
},
{
value: '选项2',
label: '选项2'
}
];
}, 20000);
}
};
</script>
要回显,那么第一级要有数据,选中的第二级,第三级也要对应上
比如省市区
第一级所有省需要有,第二级,选择的省下的所有市,第三级,选择的所有的市下的区县,回显数据格式注意好,不对是回显不了的
获取到所有省,判断要回显的省的id和当前省的id一样的,用这个省的id请求这个省的所有市,循环所有市,判断要回显的市的id,然后拿市的id请求所有区,最后给options赋值
我这里是文字,存的时候就是文字,所以需要这样,如果是id,那就简单了,直接拿对应的id请求就行,就是组装好和写死的数据一样的格式就行
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐

所有评论(0)