picker选择器的数据由columns属性控制,columns中有几个元素就代表该选择器有多少级,通过change方法来给对应列赋值。
columns = [{ values: column1, // 对应列的值 defaultIndex: 0, // 默认选中项索引 className: 'class1' // 对应列的类名 }, { values: [], defaultIndex: 0, className: 'class2' }, { values: [], defaultIndex: 0, className: 'class3' } ];
demo
<template> <div class="form"> <van-row type="flex" justify="center" align="center" style="padding-top:10px"> <van-col span="5" class="text">自定义三级联动</van-col> <van-col span="19"> <van-field v-model="student" placeholder="请选择" @click="stuShow = true" :readonly="true" /> </van-col> </van-row> <!-- 底部弹出 --> <van-popup v-model="stuShow" position="bottom" :style="{ height: '40%' }"> <van-picker :columns="stuLoad" @confirm="stuConfirm" @change="stuChange" @cancel="stuShow = false" show-toolbar /> </van-popup> </div> </template> <script> export default { name: "Form", data() { return { student: '', stuShow: false, stuLoad: [], stuColumn1: [], stuColumn2: [], stuColumn3: [] }; }, created() { this.makeData(); // 页面加载时给选择框赋初始值 }, methods: { makeData() { // 模拟数据,生产环境用axios获取数据 let column1 = [{ 'kid': 0, 'text': '请选择' }, { 'kid': 1, 'text': '一年级' }, { 'kid': 2, 'text': '二年级' }]; let column2 = { '1': [{ 'kid': 1, 'text': '一组' }, { 'kid': 2, 'text': '二组' }, { 'kid': 3, 'text': '三组' }], '2': [{ 'kid': 4, 'text': '四组' }, { 'kid': 5, 'text': '五组' }] } let column3 = { '1': [{ 'kid': 1, 'text': '小明' }, { 'kid': 2, 'text': '小红' }, { 'kid': 3, 'text': '小刚' }], '2': [{ 'kid': 4, 'text': 'Amy' }, { 'kid': 5, 'text': 'Sam' }], '3': [{ 'kid': 4, 'text': 'Sion' }, { 'kid': 5, 'text': 'Juno' }], '4': [{ 'kid': 6, 'text': 'Lucy' }, { 'kid': 7, 'text': 'Tom' }], '5': [{ 'kid': 6, 'text': 'Iwan' }] } let columns = []; columns = [{ values: column1, defaultIndex: 0 //默认选中项索引 }, { values: [], defaultIndex: 0 }, { values: [], defaultIndex: 0 } ]; this.stuColumn2 = column2; this.stuColumn3 = column3; this.stuLoad = columns; }, stuConfirm(value, index) { // 下方弹出层点击确认时触发 // value为各列选中值 // index为各列选中的索引 if (index.indexOf(0) > -1) { alert('请选择'); } else { let content = value[0]['text'] + ' / ' + value[1]['text'] + ' / ' + value[2]['text']; this.student = content; this.stuShow = false; } }, stuChange(picker, value, index) { // 选择器改变时触发 // Picker 实例 // value为当前选中值 // index为当前列对应的索引,第一列index为0,第二列index为1,依次列推 if (index == 0) { // 改变第一列的值 let i = value[0]['kid']; let item = this.stuColumn2[i] "color: #ff0000">补充知识:vue vant-picker选择器的使用,及数据结构的写法vant-picker组件columns属性接收的是一个数组,如官方例子中:
它的数组是子项是一个简单是字符,但通常我们真实的数据子项都是对象,如:
colums:[ {name:'张三',age:18},{name:'李四',age:28}]
那么像这样的数组该怎么显示呢, vant-picker的value-key属性就是解决这个问题的,如我要使用上面的数组,那么vant-picker
就是这样
另外,如果数组中的子项含有键名为'text',那么value-key也可以不用设置,组件会默认取这个键名,如colums:[ {text:'张三',age:18},{text:'李四',age:28}]
以上这篇vant picker+popup 自定义三级联动案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】