<template> <div>    <van-field @click="showPickerHandle" is-link v-model="name" :label="label" placeholder="Please select" :required="required" readonly :disabled="disabled"/>       <van-popup v-model="showStatus" position="bottom" :close-on-click-overlay="false" custom-style="height: 30%;">      <van-picker show-toolbar :columns="columns" value-key="name" @cancel="onCancel" :visible-item-count="visibleCount" :default-index="defaultIndex" @confirm="onConfirm"/>    </van-popup>  </div></template><script>import { findIndex } from "@/utils/tool";export default {  props: {    value: { default: ' '},// you must use value list: {type: Array, default: [] },    visibleCount: { type: Number, default: 2 },    label: { type: String, default: ' '},    required: { type: Boolean, default: false },    disabled: { type: Boolean, default: false}},data() {    return {      showStatus: this.showPicker,      columns: this.list,      name: ' '    };  },  components: {},  created() {    for(let i = 0; i < this.columns.length; i++) {      if(this.columns[i].val === this.value) {        this.name = this.columns[i].name;      }    }  },  methods: {    onCancel() {      this.showStatus  = false;      this.$emit('cancel'}, // control the selector's pop-up layer onConfirm(value, index) {// console.log(value); this.showStatus =false;      this.name = value.name      this.$emit('input',value.val);    },    showPickerHandle() {if(this.disabled){        return      }      this.showStatus = true;    }  },  computed: {    defaultIndex () {      if(this.value ! = =' ') {return findIndex(this.value, this.columns);      }else {        return 0      }    },  },  watch: {    list(val) {      this.columns = val;    },    value: {      deep: true,      handler(val) {        // console.log(val)        if(val===' '){          this.name = ' ';        }else{          for(let i = 0; i < this.columns.length; i++) {            if(this.columns[i].val === val) {              this.name = this.columns[i].name;            }          }        }      }    }  }}</script><style lang='less' scoped>.van-cell::after {    position: absolute;    box-sizing: border-box;    content: ' '; pointer-events: none; right: 0; bottom: 0; Left: 0.42667 rem; Border - bottom: 0.02667 rem solid#ebedf0; -webkit-transform: scaleY(.5); transform: scaleY(.5); }Copy the code

The structure for the list data looks like this

/ / genderexport const sexList = [  { name: 'male', val: 1 },  { name: 'woman', val: 0 }]Copy the code

Use this directly after the parent component registers the component. Done!

<picker v-model="sex" :list="sexList " label="Gender" :disabled="editable"></picker>Copy the code