vue 实现无限级联动
实现无限级联动的核心思路
无限级联动通常指多层级联选择器，例如省市区选择或分类选择。Vue中可通过递归组件或动态数据加载实现。
递归组件实现方式
创建可递归调用的子组件，通过v-for渲染当前层级选项，并嵌套自身组件处理下一级数据。
<template>
<div>
<select v-model="selectedValue" @change="handleChange">
<option v-for="item in options" :value="item.value">{{ item.label }}</option>
</select>
<child-select
v-if="nextOptions.length"
:options="nextOptions"
@select="handleChildSelect"
/>
</div>
</template>
<script>
export default {
name: 'ChildSelect',
props: ['options'],
data() {
return {
selectedValue: '',
nextOptions: []
}
},
methods: {
handleChange() {
const selected = this.options.find(item => item.value === this.selectedValue)
this.nextOptions = selected?.children || []
this.$emit('select', this.selectedValue)
},
handleChildSelect(val) {
this.$emit('select', val)
}
}
}
</script>动态数据加载实现
通过API异步加载各级数据，适合大数据量场景。
export default {
data() {
return {
levels: [
{ options: [], selected: null },
{ options: [], selected: null }
]
}
},
methods: {
async loadOptions(levelIndex, parentId) {
const res = await api.getOptions(parentId)
this.levels[levelIndex].options = res.data
// 清空后续层级选择
for (let i = levelIndex + 1; i < this.levels.length; i++) {
this.levels[i].selected = null
this.levels[i].options = []
}
},
handleSelect(levelIndex, value) {
this.levels[levelIndex].selected = value
if (levelIndex < this.levels.length - 1) {
this.loadOptions(levelIndex + 1, value)
}
}
},
created() {
this.loadOptions(0)
}
}使用现成组件库
Element UI等库提供现成的级联选择器组件：
<el-cascader
:options="options"
:props="{ checkStrictly: true }"
@change="handleChange"
></el-cascader>性能优化建议
对于大数据量场景，建议采用虚拟滚动技术。可考虑使用第三方库如vue-virtual-scroller。
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
components: { RecycleScroller }
}注意事项
组件间通信建议使用Vuex管理状态，避免深层prop传递。动态层级数量可通过v-for配合数组长度控制。
