Vue+ElementUI 实现省市区三级联动
<template>
<el-cascader
:options="options"
v-model="selectedOptions"
@change="handleChange"
placeholder="请选择省市区"
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [], // 用于存储选中的省市区信息
options: [] // 用于存储联动选项的数据结构
};
},
created() {
this.fetchData(); // 获取初始数据
},
methods: {
fetchData() {
// 这里应该是从后端获取实际的省市区数据
// 为了示例,这里使用静态数据
this.options = [
{
label: '北京市',
value: '北京市',
children: [
{ label: '北京市', value: '北京市' },
// ... 其他城市
]
},
// ... 其他省份
];
},
handleChange(value) {
console.log(value); // 打印选中的值
// 这里可以执行其他逻辑,比如发请求获取最终数据
}
}
};
</script>
这个例子展示了如何使用Vue和Element UI的Cascader组件来实现一个基本的省市区三级联动。在这个例子中,我们假设fetchData
会从后端获取实际的省市区数据,然后将其赋值给options
变量。用户每次更改选择时,handleChange
方法会被触发,可以在这里添加获取最终数据的逻辑。
评论已关闭