vue element-ui el-cascader级联选择器数据回显的两种实现方法
作者：白开水z
这篇文章主要介绍了vue element-ui el-cascader级联选择器数据回显的两种实现方法，具有很好的参考价值，希望对大家有所帮助。
element-ui el-cascader级联选择器数据回显 简单的两种方法
<el-cascader ref="myCascader" clearable v-model="regionValue" :options="regionOptions" :props="regionProps" @change="handleChangeRegion" ></el-cascader>
通过value绑定值判断是通过name回显还是id回显
export default {
data() {
return{
regionValue: ['name1','name2','name3'], //（注：name1，name2，name3的数据要和name一样） 通过id回显 regionValue: ['id1','id2','id3']
regionOptions: [],
regionProps: {
value: 'name', //如果想通过id回显就 value:'id'
label: 'name',
children: 'children',
},
}
}
}注：根据后端给的数据参考本方法测试
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请求就行，就是组装好和写死的数据一样的格式就行
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。