要实现级
联选择器的
回显数据，需要在组件中绑定一个数组作为 v-model，然后在父组件中对该数组进行赋值即可实现
回显。
具体实现步骤如下：
1. 在父组件中定义一个数组，用于存储级
联选择器的选中值，如下所示：
```
<template>
<div>
<el-cascader
:options="options"
v-model="selectedValues"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedValues: [], // 存储级
联选择器的选中值
options: [
{
value: 'beijing',
label: '北京',
children: [
{
value: 'haidian',
label: '海淀区',
},
{
value: 'dongcheng',
label: '东城区',
},
],
},
{
value: 'shanghai',
label: '上海',
children: [
{
value: 'pudong',
label: '浦东新区',
},
{
value: 'baoshan',
label: '宝山区',
},
],
},
],
};
},
methods: {
handleChange(value) {
console.log(value);
},
},
};
</script>
```
2. 在父组件中获取
回显数据，并将其赋值给 selectedValues 数组，如下所示：
```
<template>
<div>
<el-cascader
:options="options"
v-model="selectedValues"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedValues: [], // 存储级
联选择器的选中值
options: [
{
value: 'beijing',
label: '北京',
children: [
{
value: 'haidian',
label: '海淀区',
},
{
value: 'dongcheng',
label: '东城区',
},
],
},
{
value: 'shanghai',
label: '上海',
children: [
{
value: 'pudong',
label: '浦东新区',
},
{
value: 'baoshan',
label: '宝山区',
},
],
},
],
};
},
methods: {
handleChange(value) {
console.log(value);
},
},
mounted() {
// 模拟获取
回显数据
const data = {
province: 'beijing',
city: 'haidian',
};
// 将
回显数据赋值给 selectedValues 数组
this.selectedValues = [data.province, data.city];
},
};
</script>
```
3. 当 selectedValues 数组的值发生变化时，级
联选择器的选中值也会随之更新，因此我们可以在 handleChange 方法中获取最新的选中值，如下所示：
```
<template>
<div>
<el-cascader
:options="options"
v-model="selectedValues"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedValues: [], // 存储级
联选择器的选中值
options: [
{
value: 'beijing',
label: '北京',
children: [
{
value: 'haidian',
label: '海淀区',
},
{
value: 'dongcheng',
label: '东城区',
},
],
},
{
value: 'shanghai',
label: '上海',
children: [
{
value: 'pudong',
label: '浦东新区',
},
{
value: 'baoshan',
label: '宝山区',
},
],
},
],
};
},
methods: {
handleChange(value) {
console.log(value);
},
},
mounted() {
// 模拟获取
回显数据
const data = {
province: 'beijing',
city: 'haidian',
};
// 将
回显数据赋值给 selectedValues 数组
this.selectedValues = [data.province, data.city];
},
};
</script>
```
这样，当父组件渲染完毕时，级
联选择器的选中值就会自动
回显。
3750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
