vue中van-picker的选项插槽使用方法

van-picker的内部选项怎么来自定义

首先要确保 Vant UI 的版本在2.10.0以上

然后利用插槽slot来实现，在Vant 里插槽有一个进阶用法 #

<van-picker
  :show-toolbar="false"
  :default-index="2" // 默认选中第三行，选中第一行的话，上面会有一段空白，不好看
  :loading="loading"
  :columns="columns" // 一定要绑定数据源
>
  <template #option="item"> // 这里的item就是每一个选项，可以是一个对象也可以是一个字符串
  // 我这里实现的是每一行的选项由id和name组成
  // 切记不要用v-for，会导致数据重复出现在一个选项里
    <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>

附上Vant的官方地址：https://vant-contrib.gitee.io/vant/#/zh-CN/home