vant实现select效果，单选和多选

官方推荐picker，但是我们项目用picker还要搭配Popup和cell、field，维护太太麻烦，所以自己封装一个基于picker的select

目前是vue2版本
vue3版本

2023-02-10 再次更新,解决select默认值问题

select单选

//封装VanFieldSelectPicker组件

使用(建议全局注册)

//这里一定要注意option，我们项目的字典固定是name，code格式  { name: '我是选中的label', code: '1', other: '额外数据' }，如果你的项目不是，要么改主组件的option默认值，要么调用的时候要自定option

//以下option的设置是可以省略，因为默认就是name，code；为了方便大家理解加上，请注意自己项目的实际情况


data:
value1: '1', // select选中的value
columns: [// 如果可选数据不是label-value,需要配置下option，如果是就不需要配置
        { name: '我是选中的label', code: '1', other: '额外数据' },
        { name: '我也是选中的label33333', code: '2', other: '额外数据' },
        { name: '我是选中的label', code: '21', other: '额外数据' },
        { name: '我也是选中的label555555555', code: '22', other: '额外数据' },
        { name: '我是选中的label', code: '11', other: '额外数据' },
        { name: '我也是选中的label', code: '52', other: '额外数据' },
        { name: '我是选中的label', code: '71', other: '额外数据' },
        { name: '我也是选中的label', code: '72', other: '额外数据' }
      ]

methods:
confirm2 (data1, index, data2) { // checkbox确定,
    // tips 正常获取值，用不到这个方法，用v-model获取值即可，这个方法是告诉你，可以获取任何你想要的数据
    // data1 当前这一条的obj数据
    // index 当前选择的索引
    // data2 当前这一条数据的value
      console.log(data1, data2, index)
      this.value4 = data1
    }

Events 同 vant-picker

|-confirm -- 点击完成按钮时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
|-cancel -- 点击取消按钮时触发 -- -|
|-change -- 选项改变时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|

属性

label-width ---------------------------label的一个宽度设置

label="单选select"---------------------label文字

:columns="columns"---------------------可选择的数据，只接受key-value格式的对象集合，[1,2,3]不可以

:option="{label:'name',value:'code'}"--数据的配置格式，默认label(显示的文字)，value（具体值）

checkbox多选

//封装VanFieldCheckbox组件

使用

内置[不包含]选项，表示已有选项都不符合，和全选是互斥的，实际项目中为空只表示用户没有录入，但不表示全部不选，所以加上了，不需要不开启即可（默认不开启），需要的话可跟项目实际情况再自定义

//这里一定要注意option，我们项目的字典固定是name，code格式  { name: '我是选中的label', code: '1', other: '额外数据' }，如果你的项目不是，要么改主组件的option默认值，要么调用的时候要自定option

//以下option的设置是可以省略，因为默认就是name，code；为了方便大家理解加上，请注意自己项目的实际情况


 

data:
 value2: ['1'], // checkbox选中的value
      columns: [// 如果可选数据不是label-value,需要配置下option，如果是就不需要配置
        { name: '我是选中的label', code: '1', other: '额外数据' },
        { name: '我也是选中的label33333', code: '2', other: '额外数据' },
        { name: '我是选中的label', code: '21', other: '额外数据' },
        { name: '我也是选中的label555555555', code: '22', other: '额外数据' },
        { name: '我是选中的label', code: '11', other: '额外数据' },
        { name: '我也是选中的label', code: '52', other: '额外数据' },
        { name: '我是选中的label', code: '71', other: '额外数据' },
        { name: '我也是选中的label', code: '72', other: '额外数据' }
      ]

methods:
confirm (data1, data2) { // select确定,
    // tips 正常获取值，用不到这个方法，用v-model获取值即可，这个方法是告诉你，可以获取任何你想要的数据
    // data1 是当前选中数据的value的数组
    // data2 是当前选中数据的整个obj集合
      console.log(data1, data2)
      this.value3 = data2
    },

Events 同 vant-picker

|-confirm -- 点击完成按钮时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
|-cancel -- 点击取消按钮时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
|-change -- 选项改变时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
|-clickItem -- 点击单条数据的时候触发，-返回：选中的当前数据-|

属性

label-width ---------------------------label的一个宽度设置

label="单选select"---------------------label文字

:columns="columns"---------------------可选择的数据，只接受key-value格式的对象集合，[1,2,3]不可以

:option="{label:'name',value:'code'}"--数据的配置格式，默认label(显示的文字)，value（具体值）

应该可以继续优化，但是这个能满足目前的项目，有做过类似封装的小伙伴求交流

目前项目中还有需求是非field的多选和单选弹出，这里也单独处理， 有需要后面再放git代码

image.png