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、完整代码：<temp盟敢势袂late> <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、成品展示：
