vue中van-picker的选项插槽使用方法
van-picker的内部选项怎么来自定义首先要确保vant ui的版本在2.10.0以上
·
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
更多推荐
已为社区贡献2条内容
所有评论(0)