vue实现级联单选
Vue 实现级联单选
级联单选是一种常见的交互形式，通常用于选择具有层级关系的数据（如省市区）。以下是基于 Vue 的实现方法。
数据准备
确保数据结构是嵌套的，例如：
data() {
return {
options: [
{
label: '省份',
children: [
{ label: '城市1', children: [...] },
{ label: '城市2', children: [...] }
]
}
],
selectedValues: [] // 存储每级选中的值
}
}使用组件
Vue 生态中有成熟的级联组件可直接使用：
-
Element UI 的 Cascader
安装后直接调用：
<el-cascader v-model="selectedValues" :options="options" :props="{ checkStrictly: true }" // 启用单选 /> -
Ant Design Vue 的 Cascader
类似用法：<a-cascader v-model:value="selectedValues" :options="options" :show-search="{ true }" />
自定义实现
如果需要手动实现逻辑：
<template>
<div v-for="(level, index) in options" :key="index">
<select v-model="selectedValues[index]" @change="loadNextLevel(index)">
<option v-for="item in level" :value="item.value">{{ item.label }}</option>
</select>
</div>
</template>methods: {
loadNextLevel(index) {
const selected = this.selectedValues[index];
if (selected && selected.children) {
this.options[index + 1] = selected.children;
} else {
this.options.length = index + 1; // 清除后续层级
}
}
}注意事项
- 数据层级需明确，避免循环引用。
- 若数据量较大，建议结合懒加载优化性能。
- 移动端需注意交互适配，可考虑下拉面板式设计。
通过以上方法，可以灵活实现符合业务需求的级联单选功能。
