vue实现级联选择
Vue 实现级联选择的方法
使用 Element UI 的 Cascader 组件
安装 Element UI 依赖：
npm install element-ui引入 Cascader 组件：
import { Cascader } from 'element-ui';
Vue.use(Cascader);模板中使用：
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleChange">
</el-cascader>数据格式示例：
data() {
return {
selectedOptions: [],
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则'
}]
}]
}
}使用 Ant Design Vue 的 Cascader
安装 Ant Design Vue：
npm install ant-design-vue引入组件：
import { Cascader } from 'ant-design-vue';
Vue.use(Cascader);模板示例：
<a-cascader
v-model="value"
:options="options"
placeholder="请选择"
@change="onChange"
/>自定义实现级联选择
创建递归组件：
<!-- CascaderItem.vue -->
<template>
<div>
<select v-model="selectedValue" @change="handleChange">
<option v-for="item in options" :value="item.value">
{{ item.label }}
</option>
</select>
<cascader-item
v-if="selectedValue && children"
:options="children"
@change="emitChange"
/>
</div>
</template>
<script>
export default {
name: 'CascaderItem',
props: ['options'],
data() {
return {
selectedValue: null
}
},
computed: {
children() {
const selected = this.options.find(
item => item.value === this.selectedValue
);
return selected ? selected.children : null;
}
},
methods: {
handleChange() {
this.emitChange([this.selectedValue]);
},
emitChange(values) {
this.$emit('change', [this.selectedValue, ...values]);
}
}
}
</script>父组件中使用：
<cascader-item :options="options" @change="handleCascaderChange"/>动态加载选项
Element UI 示例：
<el-cascader
:props="props"
></el-cascader>data() {
return {
props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(item => ({
value: ++id,
label: `选项${id}`,
leaf: level >= 2
}));
resolve(nodes);
}, 1000);
}
}
};
}注意事项
级联选择器数据格式要求严格的树形结构，每个节点需要包含 value 和 label 属性
对于大数据量场景建议使用懒加载模式，避免一次性加载所有数据
移动端使用时需要考虑响应式设计和触摸操作体验
可以结合后端 API 实现动态数据加载，通过监听选择变化触发新的数据请求
