vue实现级联
Vue 实现级联选择器的方法
级联选择器（Cascader）是常见的表单组件，用于处理多层级联动数据选择（如省市区选择）。以下是几种实现方式：
基于 Element UI 的 el-cascader 组件
安装 Element UI 后可直接使用封装好的级联组件：
npm install element-ui<template>
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleChange">
</el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [{
value: 'jiangsu',
label: '江苏',
children: [{
value: 'nanjing',
label: '南京'
}]
}]
}
},
methods: {
handleChange(value) {
console.log(value);
}
}
}
</script>自定义递归组件实现
通过递归组件实现无限层级级联：
<!-- CascaderItem.vue -->
<template>
<div>
<select v-model="selectedValue" @change="onChange">
<option v-for="item in data" :value="item.value">
{{ item.label }}
</option>
</select>
<cascader-item
v-if="childData.length"
:data="childData"
@change="handleChildChange">
</cascader-item>
</div>
</template>
<script>
export default {
name: 'CascaderItem',
props: ['data'],
data() {
return {
selectedValue: '',
childData: []
}
},
methods: {
onChange(e) {
const selected = this.data.find(item => item.value === e.target.value);
this.childData = selected.children || [];
this.$emit('change', selected);
},
handleChildChange(val) {
this.$emit('change', val);
}
}
}
</script>使用第三方库 vue-cascader
专为 Vue 设计的轻量级级联组件：
npm install vue-cascader<template>
<vue-cascader
:data="options"
:model.sync="selectedValues"
placeholder="请选择">
</vue-cascader>
</template>
<script>
import VueCascader from 'vue-cascader';
export default {
components: { VueCascader },
data() {
return {
selectedValues: [],
options: [{
id: 1,
name: '一级选项',
children: [{
id: 2,
name: '二级选项'
}]
}]
}
}
}
</script>动态加载数据
实现懒加载级联数据：
<template>
<el-cascader
:props="props"
v-model="selectedOptions">
</el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
props: {
lazy: true,
async lazyLoad(node, resolve) {
const { level } = node;
const result = await fetch(`/api/data?level=${level}`);
resolve(result.data);
}
}
}
}
}
</script>关键注意事项
-
数据结构需保持一致性，建议格式：
{ value: 'id', label: '显示文本', children: [/* 子项 */] } -
多选模式需设置
props.multiple = true -
禁用选项可通过
disabled: true属性控制 -
样式覆盖建议使用深度选择器：
::v-deep .el-cascader-menu { width: 200px; }
以上方案可根据项目需求选择，Element UI 方案适合快速开发，自定义组件更适合特殊交互需求。
