vant picker+popup 自定义三级联动案例


Posted in Javascript onNovember 04, 2020

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属性接收的是一个数组,如官方例子中:

vant picker+popup 自定义三级联动案例

它的数组是子项是一个简单是字符,但通常我们真实的数据子项都是对象,如:

colums:[ {name:'张三',age:18},{name:'李四',age:28}]

那么像这样的数组该怎么显示呢, vant-picker的value-key属性就是解决这个问题的,如我要使用上面的数组,那么vant-picker

就是这样

vant picker+popup 自定义三级联动案例

另外,如果数组中的子项含有键名为'text',那么value-key也可以不用设置,组件会默认取这个键名,如colums:[ {text:'张三',age:18},{text:'李四',age:28}]

以上这篇vant picker+popup 自定义三级联动案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
js运动应用实例解析
Dec 28 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 #Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 #Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 #Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 #Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 #Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 #Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 #Javascript
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHP实现的日历功能示例
2018/09/01 PHP
php array_map()函数实例用法
2021/03/03 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python input函数使用实例解析
2019/11/22 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
学生安全教育材料
2014/02/14 职场文书
师范生见习报告
2014/10/31 职场文书
征求意见函
2015/06/05 职场文书
立案决定书范文
2015/06/24 职场文书
初中美术教学反思
2016/02/17 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers