最近在做移动端app时，使用vant 的picker选择器时，发现coulumns 的值为一个数组，但是开发需求，需要是一个页面展示内容，传给后端字段是id,于是研究了一下，发现vant中的value-key可以解决此问题。品牌型号：华硕魔霸 5rplus 系统版本：windos 10软件版本：visio Studio Code1.63.2方法/步骤1/4分步阅读

前言：

vant 的 van-picker 选择器 里面的 数据 columns 为一个数组

例： columns:

2/4

需求：

需要页面展示内容，传给后端字段是id，故应该把columns 值改成以下形式：

columns 为 columns:

以label 值渲染前端页面 ，传给后端字段值为value ，使用 value-key 来解决此需求

3/4

完整代码：

template

div

van-cell @click=openPop :value=value title=四季 is-link value-class=black arrow-direction=down center

/van-cell

van-popup v-model=showPicker round position=bottom

!-- 注意： value-key=label label 对应 columns 的值 --

van-picker

value-key=label

show-toolbar

:columns=columns

@cancel=showPickers = false

@confirm=onConfirm

/

/van-popup

/div

/template

script

export default {

data() {

return {

value: , // 前端回显的值

prcCode: , // 后端接收的值

showPicker: false,

columns:

}

},

methods: {

openPop() {

this.showPicker = true

},

onConfirm(val) {

console.log(val, val 是个对象)

this.showPicker = false

this.value = val.label

this.prcCode = val.value

console.log(this.value, 前端回显的值, this.prcCode, 后端接收的值)

}

}

}

/script

4/4

成品展示：

注意事项

value-key=label label 对应 columns 的值

里拉米苏