vue实现多级选择
Vue 实现多级选择的方法
多级选择通常指级联选择（如省市区三级联动），以下是几种常见的实现方式：
使用递归组件实现树形选择
递归组件适合处理无限层级的数据结构，例如部门树或分类树：
<template>
<div>
<tree-select :data="treeData" @select="handleSelect"></tree-select>
</div>
</template>
<script>
export default {
components: {
TreeSelect: {
name: 'TreeSelect',
props: ['data'],
template: `
<ul>
<li v-for="item in data" :key="item.id">
<span @click="$emit('select', item)">{{ item.label }}</span>
<tree-select
v-if="item.children"
:data="item.children"
@select="$emit('select', $event)">
</tree-select>
</li>
</ul>
`
}
},
data() {
return {
treeData: [
{
id: 1,
label: 'Level 1',
children: [
{ id: 2, label: 'Level 2' }
]
}
]
}
}
}
</script>使用第三方组件库
Element UI 的 Cascader 组件是成熟的级联选择方案：
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleChange">
</el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [{
value: 'province',
label: '省',
children: [{
value: 'city',
label: '市'
}]
}]
}
}
}
</script>动态加载级联数据
当数据量较大时可采用异步加载：
methods: {
lazyLoad(node, resolve) {
const { level } = node;
axios.get(`/api/regions?level=${level + 1}&parent=${node.value}`)
.then(res => {
resolve(res.data.map(item => ({
value: item.id,
label: item.name,
leaf: level >= 2
})));
});
}
}使用 Vuex 管理状态
对于复杂的多级选择，建议使用状态管理：
const store = new Vuex.Store({
state: {
selectedItems: []
},
mutations: {
updateSelection(state, payload) {
state.selectedItems = payload
}
}
})移动端适配方案
若需适配移动端，可考虑使用带滑动选择的组件：
<picker-view
v-model="multiIndex"
@change="bindChange">
<picker-view-column>
<div v-for="(item,index) in provinces" :key="index">{{item}}</div>
</picker-view-column>
<picker-view-column>
<div v-for="(item,index) in cities" :key="index">{{item}}</div>
</picker-view-column>
</picker-view>实现注意事项
- 数据格式统一：确保每级数据具有相同的结构字段
- 性能优化：大数据量时使用虚拟滚动或分页加载
- 空状态处理：对没有子级的数据进行特殊处理
- 多选支持：需要额外处理选中状态的维护
- 搜索功能：可结合模糊搜索提升用户体验
样式自定义技巧
通过作用域 CSS 自定义选择器样式：
/deep/ .el-cascader-menu {
min-width: 120px;
}
/deep/ .el-cascader-node.in-active-path {
color: #409EFF;
}以上方案可根据具体业务需求组合使用，Element UI、Ant Design Vue 等组件库提供了开箱即用的多级选择组件，复杂场景建议优先考虑这些成熟解决方案。
