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 相关文章推荐
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
VSCode launch.json配置详细教程
Jun 18 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内核探索:变量存储与类型使用说明
2014/01/30 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
vue实现购物车列表
2020/06/30 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python 发送json数据操作实例分析
2019/10/15 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
开会迟到检讨书
2014/01/08 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
身份证丢失证明
2015/06/19 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL