van-picker 里 value-key 的使用
1、前言：
vant 的 van-picker 选择器 里面的 数据 columns 为一个数组
例： columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州']
2、需求：
需要页面展示内容，传给后端字段是id，故应该把 columns 值改成以下形式：
columns 为 columns:[
{
value:'001',
label:'春天'
},
{
value:'002',
label:'夏天'
},
{
value:'003',
label:'秋天'
},
{
value:'004',
label:'冬天'
}
]
以label 值渲染前端页面 ，传给后端字段值为value ，使用 value-key 来解决此需求
3、完整代码：
<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: [
{
value: '001',
label: '春天'
},
{
value: '002',
label: '夏天'
},
{
value: '003',
label: '秋天'
},
{
value: '004',
label: '冬天'
}
]
}
},
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、成品展示：
