vant4下拉选择器多选的封装

### 实现 Vant2 下拉选择器与数组对象的绑定 在 Vant2 中，`Picker` 是用于实现下拉选择功能的核心组件。要将其绑定到一个数组对象上，可以通过 `columns` 属性传递选项数据，并通过监听事件来更新选中的值。 以下是具体实现方法： #### 1. 数据结构设计 假设有一个数组对象表示可选项，其形式如下： ```javascript const columns = [ { text: '选项一', value: 'value1' }, { text: '选项二', value: 'value2' }, { text: '选项三', value: 'value3' } ]; ``` 此数组对象中，`text` 表示显示的文字内容，`value` 则是对应的值[^1]。 #### 2. 使用 Picker 组件 在模板部分引入并配置 `van-picker` 组件，设置 `columns` 属性为上述定义的对象数组。 ```html <template> <div> <!-- 显示当前选中的值 --> <p>已选：{{ selectedValue }}</p> <!-- 下拉选择器 --> <van-popup v-model="showPicker" position="bottom"> <van-picker :columns="columns" @confirm="onConfirm" @cancel="onCancel" show-toolbar /> </van-popup> <!-- 打开选择器按钮 --> <button @click="togglePicker">打开选择器</button> </div> </template> ``` #### 3. Vue 方法实现 在脚本部分编写逻辑处理函数，管理弹窗状态以及确认/取消操作的行为。 ```javascript <script> export default { data() { return { // 是否展示 picker showPicker: false, // 已选中的值 selectedValue: '', // 可选项数据 columns: [ { text: '选项一', value: 'value1' }, { text: '选项二', value: 'value2' }, { text: '选项三', value: 'value3' } ] }; }, methods: { togglePicker() { this.showPicker = !this.showPicker; }, onConfirm(value) { this.selectedValue = value.value; // 更新选中的值 this.togglePicker(); // 关闭 picker }, onCancel() { this.togglePicker(); // 关闭 picker } } }; </script> ``` #### 4. 处理 keep-alive 场景下的初始化问题 如果该组件被设置为 `keep-alive` 的话，在切换回页面时可能需要重新加载数据。可以利用 `activated` 生命周期钩子完成这一需求[^2]。 ```javascript activated() { if (this.columns.length === 0) { // 假设这里调用接口获取最新数据 const newData = [ { text: '动态选项一', value: 'dynamic1' }, { text: '动态选项二', value: 'dynamic2' } ]; this.columns = newData; } } ``` --- ### 注意事项 - 如果组件内部有复杂业务逻辑，建议将某些功能模块化或封装成独立工具函数[^4]。 - 对于多级联动场景（如省市区选择），需额外关注列之间的依赖关系调整。 ---