vant picker+popup 自定义三级联动案例
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] ? this.stuColumn2[i] : []; if (item && item[0]['text'] != '请选择') { item.unshift({ 'kid': 0, 'text': '请选择' }) } picker.setColumnValues(1, item); // 给对应的列赋值,第一个参数为列的index值,第二个参数为列的values } else if (index == 1) { let i = value[1]['kid']; let item = this.stuColumn3[i] ? this.stuColumn3[i] : []; if (item.length != 0 && item[0]['text'] != '请选择') { item.unshift({ 'kid': 0, 'text': '请选择' }) } picker.setColumnValues(2, item); } } } }; </script> <style scoped> .text { text-align: right; } </style>
补充知识: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 自定义三级联动案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)