vue实现级联
Vue 实现级联选择器
级联选择器（Cascader）常用于省市区、分类等层级数据的联动选择。Vue 中可通过 Element UI、Ant Design Vue 等组件库或自定义实现。
使用 Element UI 的 Cascader 组件
安装 Element UI 后直接使用 <el-cascader> 组件：
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"
/>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
value: 'jiangsu',
label: '江苏',
children: [
{ value: 'nanjing', label: '南京' }
]
}
]
}
},
methods: {
handleChange(value) {
console.log(value)
}
}
}
</script>使用 Ant Design Vue 的 Cascader
安装 Ant Design Vue 后使用 <a-cascader>：
<template>
<a-cascader
v-model:value="value"
:options="options"
placeholder="请选择"
@change="onChange"
/>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value = ref([])
const options = [
{
value: 'zhejiang',
label: '浙江',
children: [
{ value: 'hangzhou', label: '杭州' }
]
}
]
const onChange = (selectedOptions) => {
console.log(selectedOptions)
}
return { value, options, onChange }
}
}
</script>自定义级联选择器
通过递归组件实现自定义级联：
<template>
<div>
<select v-model="selectedProvince" @change="loadCities">
<option v-for="province in provinces" :value="province.id">
{{ province.name }}
</option>
</select>
<select v-model="selectedCity" @change="loadAreas">
<option v-for="city in cities" :value="city.id">
{{ city.name }}
</option>
</select>
<select v-model="selectedArea">
<option v-for="area in areas" :value="area.id">
{{ area.name }}
</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
provinces: [{ id: 1, name: '江苏' }],
cities: [],
areas: [],
selectedProvince: null,
selectedCity: null,
selectedArea: null
}
},
methods: {
loadCities() {
this.cities = [{ id: 101, name: '南京' }]
},
loadAreas() {
this.areas = [{ id: 10101, name: '玄武区' }]
}
}
}
</script>动态加载数据
对于大数据量场景可动态加载子级数据：
props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node
setTimeout(() => {
const nodes = level === 0
? [{ value: 1, label: '江苏' }]
: [{ value: 101, label: '南京' }]
resolve(nodes)
}, 500)
}
}注意事项
- 数据结构需符合
value/label/children格式 - 多选场景需配置
props.multiple = true - 远程加载数据建议添加 loading 状态
- 移动端考虑使用 picker 组件替代
通过以上方式可灵活实现不同复杂度的级联选择功能，组件库方案适合快速开发，自定义方案更适合特殊交互需求。
