要给级联选择器赋值,你需要将数据传递给级联选择器的选项,并设置默认选中的值。以下是一个示例代码,演示了如何给级联选择器赋值:
<template>
<div>
<select v-model="selectedOption1" @change="handleOption1Change">
<option value="">请选择</option>
<option v-for="option in options1" :value="option.value">{{ option.label }}</option>
</select>
<select v-model="selectedOption2" @change="handleOption2Change">
<option value="">请选择</option>
<option v-for="option in options2" :value="option.value">{{ option.label }}</option>
</select>
<select v-model="selectedOption3">
<option value="">请选择</option>
<option v-for="option in options3" :value="option.value">{{ option.label }}</option>
</select>
</div>
</template>
<script>
export default {
name: 'Cascader',
data() {
return {
selectedOption1: '',
selectedOption2: '',
selectedOption3: '',
options1: [
{ label: 'Option 1-1', value: '1-1' },
{ label: 'Option 1-2', value: '1-2' },
{ label: 'Option 1-3', value: '1-3' },
],
options2: [],
options3: [],
};
},
methods: {
handleOption1Change() {
// 根据选中的第一级选项更新第二级选项和第三级选项
this.selectedOption2 = '';
this.selectedOption3 = '';
if (this.selectedOption1 === '1-1') {
this.options2 = [
{ label: 'Option 2-1', value: '2-1' },
{ label: 'Option 2-2', value: '2-2' },
];
this.options3 = [
{ label: 'Option 3-1', value: '3-1' },
{ label: 'Option 3-2', value: '3-2' },
];
} else if (this.selectedOption1 === '1-2') {
this.options2 = [
{ label: 'Option 2-3', value: '2-3' },
{ label: 'Option 2-4', value: '2-4' },
];
this.options3 = [
{ label: 'Option 3-3', value: '3-3' },
{ label: 'Option 3-4', value: '3-4' },
];
} else if (this.selectedOption1 === '1-3') {
this.options2 = [
{ label: 'Option 2-5', value: '2-5' },
{ label: 'Option 2-6', value: '2-6' },
];
this.options3 = [
{ label: 'Option 3-5', value: '3-5' },
{ label: 'Option 3-6', value: '3-6' },
];
} else {
this.options2 = [];
this.options3 = [];
}
},
handleOption2Change() {
// 根据选中的第二级选项更新第三级选项
this.selectedOption3 = '';
if (this.selectedOption2 === '2-1') {
this.options3 = [
{ label: 'Option 3-1', value: '3-1' },
{ label: 'Option 3-2', value: '3-2' },
];
} else if (this.selectedOption2 === '2-2') {
this.options3 = [
{ label: 'Option 3-3', value: '3-3' },
{ label: 'Option 3-4', value: '3-4' },
];
} else if (this.selectedOption2 === '2-3') {
this.options3 = [
{ label: 'Option 3-5', value: '3-5' },
{ label: 'Option 3-6', value: '3-6' },
];
} else if (this.selectedOption2 === '2-4') {
this.options3 = [
{ label: 'Option 3-7', value: '3-7' },
{ label: 'Option 3-8', value: '3-8' },
];
} else {
this.options3 = [];
}
},
},
};
</script>
在这个示例中,我们创建了一个名为Cascader
的组件,它包含了三个级联选择器。
每个级联选择器都使用v-model
指令绑定一个选中的值,并使用v-for
指令根据选项数据渲染选项列表。
在data
中,我们定义了selectedOption1
、selectedOption2
和selectedOption3
来存储选中的值,以及options1
、options2
和options3
来存储选项数据。
当第一级选项改变时,我们使用handleOption1Change
方法更新第二级和第三级的选项数据,并将第二级和第三级的选中值重置为初始状态。
当第二级选项改变时,我们使用handleOption2Change
方法更新第三级的选项数据,并将第三级的选中值重置为初始状态。
通过在模板中绑定事件监听器,我们可以根据用户的选择动态更新级联选择器的选项和选中值。
你可以根据实际情况和需求,修改和扩展这个示例代码,以满足你的具体需求。