vue实现picker联动
实现 Picker 联动的基本思路
在 Vue 中实现 Picker 联动通常涉及父子组件的数据传递和状态管理。联动 Picker 的核心是当父级 Picker 的值变化时，子级 Picker 的数据源需要动态更新。
使用 v-model 绑定数据
父组件通过 v-model 绑定选中的值，子组件通过 props 接收数据，并通过 $emit 触发更新。例如：
<!-- 父组件 -->
<template>
<parent-picker v-model="selectedParent" @change="handleParentChange" />
<child-picker v-model="selectedChild" :options="childOptions" />
</template>
<script>
export default {
data() {
return {
selectedParent: null,
selectedChild: null,
childOptions: []
};
},
methods: {
handleParentChange(val) {
this.childOptions = this.getChildOptions(val);
}
}
};
</script>动态加载子 Picker 数据
子 Picker 的数据通常通过父 Picker 的选择结果动态加载。可以使用计算属性或监听父 Picker 的变化：
<!-- 子组件 -->
<template>
<select v-model="selected">
<option v-for="option in options" :value="option.value" :key="option.value">
{{ option.label }}
</option>
</select>
</template>
<script>
export default {
props: {
value: String,
options: Array
},
computed: {
selected: {
get() { return this.value; },
set(val) { this.$emit('input', val); }
}
}
};
</script>使用第三方库
如果不想手动实现，可以使用现成的组件库：
- Element UI 的
Cascader组件支持联动选择。 - Vant 的
Picker组件支持多列联动。 - Mint UI 的
Picker也提供类似功能。
例如，使用 Vant 的 Picker：
<van-picker
title="联动选择"
show-toolbar
:columns="columns"
@change="onChange"
/>复杂联动场景
对于多级联动（如省市区选择），可以使用递归组件或扁平数据结构。推荐将数据预处理为树形结构，并通过递归组件渲染：
// 数据格式示例
const treeData = [
{
label: '省',
value: '1',
children: [
{ label: '市', value: '1-1' }
]
}
];注意事项
- 确保父子组件的数据流清晰，避免直接修改
props。 - 如果数据量较大，考虑分步加载或懒加载子 Picker 的数据。
- 对于移动端，注意 Picker 的交互体验（如滑动选择）。
