vue级联选择怎么实现
实现Vue级联选择的方法
使用Element UI的Cascader组件
安装Element UI库后，可以直接使用el-cascader组件实现级联选择功能。需要准备嵌套结构的数据源，并通过props配置项指定子节点字段名。
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [{
value: 'guide',
label: 'Guide',
children: [{
value: 'disciplines',
label: 'Disciplines',
children: [{
value: 'consistency',
label: 'Consistency'
}]
}]
}]
}
},
methods: {
handleChange(value) {
console.log(value)
}
}
}
</script>使用Ant Design Vue的Cascader
Ant Design Vue同样提供级联选择组件，支持异步加载数据。通过loadData属性可以实现动态加载子节点。
<template>
<a-cascader
v-model:value="value"
:options="options"
placeholder="Please select"
@change="onChange"
/>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value = ref([])
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
}
]
}
]
const onChange = (value) => {
console.log(value)
}
return {
value,
options,
onChange
}
}
}
</script>自定义递归组件实现
如果需要完全自定义样式和交互，可以创建递归组件。通过递归渲染子菜单实现级联效果。
<template>
<div class="cascader">
<div
v-for="item in options"
:key="item.value"
@mouseenter="showChildren(item)"
>
{{ item.label }}
<Cascader
v-if="item.children && activeItem === item"
:options="item.children"
/>
</div>
</div>
</template>
<script>
export default {
name: 'Cascader',
props: {
options: Array
},
data() {
return {
activeItem: null
}
},
methods: {
showChildren(item) {
this.activeItem = item
}
}
}
</script>动态加载数据
对于大数据量场景，可以使用懒加载方式。当用户展开节点时再请求对应数据。
methods: {
lazyLoad(node, resolve) {
const { level } = node
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(() => ({
value: ++id,
label: `Option - ${id}`,
leaf: level >= 2
}))
resolve(nodes)
}, 1000)
}
}表单验证集成
级联选择器可以配合表单验证使用，需要设置trigger为change事件。
rules: {
cascader: [
{
required: true,
message: 'Please select',
trigger: 'change'
}
]
}关键注意事项
- 数据结构需要保持一致性，每个节点应包含
value和label字段 - 动态加载时需要正确处理加载状态和错误情况
- 移动端适配可能需要特殊处理交互方式
- 大数据量情况下考虑虚拟滚动优化性能
