<van-picker
? :show-toolbar="false"
? :default-index="2" // 默認選中第三行，選中第一行的話，上面會有一段空白，不好看
? :loading="loading"
? :columns="columns" // 一定要綁定數(shù)據(jù)源
>
? <template #option="item"> // 這里的item就是每一個選項，可以是一個對象也可以是一個字符串
? // 我這里實現(xiàn)的是每一行的選項由id和name組成
? // 切記不要用v-for，會導(dǎo)致數(shù)據(jù)重復(fù)出現(xiàn)在一個選項里
? ? <van-row>
? ? ? <van-col :span="12" class="van-hairline--right">
? ? ? ? <p style="text-align: center">
? ? ? ? ? {{ item.id }}
? ? ? ? </p>
? ? ? </van-col>
? ? ? <van-col :span="12" class="van-hairline--left">
? ? ? ? <p style="text-align: center">
? ? ? ? ? {{ item.name }}
? ? ? ? </p>
? ? ? </van-col>
? ? </van-row>
? </template>
</van-picker>

 <van-popup v-model="sexShow" position="bottom" :style="{ height: '50%' }">
      <van-picker :show-toolbar="true" :columns="columns" ref="getValues" @confirm="onConfirm">
        <template #cancel="item">
          <p>
            性別
          </p>
        </template>
        <template #confirm="item">
          <div class="sexContent">
            <!-- <van-button class="submit">保存</van-button> -->
            <van-button class="submited">保存</van-button>
          </div>
        </template>
        <template #option="item">
          <p style="text-align: center">
            {{item.text}}
          </p>
        </template>
      </van-picker>
    </van-popup>

columns: [{
     text: '男',
       value: 1
     },
     {
       text: '女',
       value: 2
     }],

 onConfirm(value) {
     console.log(value)   //打印的是自己定義的數(shù)組對象，然后就可以進行自己的相關(guān)操作了
   },

this.$refs.getValues.getValues()