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 自定义三级联动案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
解决elementui上传组件el-upload无法第二次上传问题
这篇文章主要介绍了解决elementui上传组件el-upload无法第二次上传问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03Vue结合ElementUI上传Base64编码后的图片实例
这篇文章主要介绍了Vue结合ElementUI上传Base64编码后的图片实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)
这篇文章主要给大家介绍了关于利用vue+elementUI实现多文件上传与预览功能的相关资料,包括word/PDF/图片/docx/doc/xlxs/txt等格式文件上传,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08详解Vue基于vue-quill-editor富文本编辑器使用心得
这篇文章主要介绍了Vue基于vue-quill-editor富文本编辑器使用心得,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-01-01关于vue二进制转图片显示问题 后端返回的是byte[]数组
这篇文章主要介绍了关于vue二进制转图片显示问题 后端返回的是byte[]数组,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-06-06vue启动后请求后端接口报ERR_EMPTY_RESPONSE错误的解决
这篇文章主要介绍了vue启动后请求后端接口报ERR_EMPTY_RESPONSE错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05
最新评论