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)

相关推荐

  • 解决vant-UI库修改样式无效的问题

    最近用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效.css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用 vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中. 解决办法: 1.对于css语法起作用 使用深度选择器,使用 >>> 操作符,将scoped样式中的选择器"深入"

  • 浅谈vant组件Picker 选择器选单选问题

    1.写遮罩 2.定义data 3.写事件 4.效果图 补充知识:vue使用vant编辑用户性别 我就废话不多说了,大家还是直接看代码吧~ <van-cell title="性别" is-link :value="user.gender===1?'男':'女'" @click="isEditGenderShow=true"></van-cell> <!-- 编辑用户性别 --> <van-action-sh

  • 解决vant title-active-color与title-inactive-color不生效问题

    1.创建vue项目 2.使用vant组件 npm install vant --S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错,说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题,重新下载一个最新的vant就可以了,现在是2.6.0版本 好,接下来继续 在需要使用下拉

  • 解决VantUI popup 弹窗不弹出或无蒙层的问题

    背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件: popup1show: true 即弹窗显示 <template> <div class="PopupTime"> <van-popup v-model="popup1show" position="bottom" :overlay="true" @click-overlay="clickOv

  • 使用vant的地域控件追加全部选项

    在项目中使用了vant的Area插件,需要进行全部匹配,vant本身没有实现,需要改造代码,方法如下: <div class="site"> <span class>起点</span> <van-cell v-model="start" @click="areaSelect(0)"></van-cell> </div> <div class="site&quo

  • wepy--用vantUI 实现上弹列表并选择相应的值操作

    vantUI就不多做介绍了,是一个相对来说比较好用的ui组件库,下面是地址大家可以自己去看看: https://youzan.github.io/vant/#/zh-CN/actionsheet 接下来我们直接进入正题,在这个demo当中我是将这个弹出层封装成为一个组件,来供定义的页面去调用的,所以我们首先要做的就是先定义一个页面,在定义一个组件:下面是代码: <template> <view class="container"> <image src=&

  • vantUI 获得piker选中值的自定义ID操作

    问题 官网中给的picker例子,每项只能是个字符串,但我需要它返回每个字符串对应的自定义ID,而不是index. vantUI官网:picker 官网例子 <van-picker :columns="columns" @change="onChange" /> export default { data() { return { columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] }; }, methods: { onCha

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

    picker选择器的数据由columns属性控制,columns中有几个元素就代表该选择器有多少级,通过change方法来给对应列赋值. columns = [{ values: column1, // 对应列的值 defaultIndex: 0, // 默认选中项索引 className: 'class1' // 对应列的类名 }, { values: [], defaultIndex: 0, className: 'class2' }, { values: [], defaultIndex:

  • 微信开发 使用picker封装省市区三级联动模板

    目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法是通过一个对象里面的两组数据分表存储中文名和唯一码的

  • 微信小程序 使用picker封装省市区三级联动实例代码

    微信小程序 使用picker封装省市区三级联动实例 目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法

  • 微信小程序三级联动选择器使用方法

    本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例: 2,省市区选择器:mode = region实现省市区三级联动: 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法. WXML <view class="tui-picker-content"> <view clas

  • Vant picker 多级联动操作

    官网地址:链接 官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的. 度娘也没有找到,花了大半天爬坑试错. 搭配弹出层使用 <van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" /> <van-popup v-model="showPicker" position=&q

  • 微信小程序自定义yPicker组件实现省市区三级联动功能

    自从上一篇文章:微信小程序自定义日历组件及flex布局最后一行对齐问题分析 出来以后,有人私聊我说能不能从头分析一下我开源的自定义组件?一直没时间.这不,最近项目中有个需求是 省市区三级联动 ,我就顺便从组件库中的第一个 「扩展日期-时间picker(点此直接至GitHub,欢迎star)」组件开始说一下这两个功能的实现. 简单说一下"自定义日期-时间组件" 它的背景是项目的第一版当时发现微信小程序内置的日期组件:picker只能精确到某一天(年月日),但是我们很多时候需要年月日时分甚

  • Angularjs自定义指令实现三级联动 选择地理位置

    Angularjs自定义指令实现三级联动效果,先上图 代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo

  • Ajax商品分类三级联动的简单实现(案例)

    思路分析: 效果:当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品. 实现: 1.当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值 2.当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值 3.当选择二级商品时加载pid=当前id的商品,并创建option将商品追加到三级菜单中,并设置value值 页面效果: $(functi

  • js编写三级联动简单案例

    刚给学妹写了个简单的地区的三级联动简单案例,分享给正在学习的朋友参考下 <html> <head> <!--导入jquery--> <script type="text/javascript"src="jquery1.7.1.js"></script> </head> <script type="text/javascript"> $(function(){//页

  • Android自定义WheelView地区选择三级联动

    本文实例为大家分享了WheelView地区选择三级联动的具体代码,供大家参考,具体内容如下 1. 效果 最近需要做一个地区选择的功能,但是在网上和github上找了很久都没找到满意的,然后朋友推荐了一个给我,我花了点时间把代码大致看懂并改成我想要的,并写上我的理解.效果如图: 2. 注意 a. 首先我们要明白,网上这写三级联动的demo,不管是把数据库文件放在raw还是assets中,我们都要进行复制,将这个文件复制到app目录下,即 /data/data/"+context.getPackag

随机推荐