Vant picker 多级联动操作


Posted in Javascript onNovember 02, 2020

官网地址:链接

官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的。

度娘也没有找到,花了大半天爬坑试错。

搭配弹出层使用

Vant picker 多级联动操作

Vant picker 多级联动操作

Vant picker 多级联动操作

<van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" />

<van-popup v-model="showPicker" position="bottom">
<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange" />
</van-popup>
const citys = [ // 我们习惯的格式。 可以后台给你出,如果你打不过的话,你就。。。
 {
  text: "测试一", // 默认识别text标签
  id: 1,
  children: [
   {
    id: 11,
    text: "测试1-1",
    children: [
     {
      id: 111,
      text: "测试1-1-1"
     },
     {
      id: 112,
      text: "测试1-1-2"
     }
    ]
   },
   {
    id: 12,
    text: "测试1-2",
    children: [
     {
      id: 122,
      text: "测试1-2-1"
     },
     {
      id: 122,
      text: "测试1-2-2"
     }
    ]
   },
   {
    id: 13,
    text: "测试1-3"
   }
  ]
 },
 {
  text: "测试二",
  id: 2,
  children: [
   {
    id: 21,
    text: "测试2",
    children: [
     {
      id: 221,
      text: "测试2-2-1"
     },
     {
      id: 222,
      text: "测试2-2-2"
     }
    ]
   },
   {
    id: 22,
    text: "测试2"
   },
   {
    id: 23,
    text: "测试2"
   }
  ]
 },
 {
  text: "测试三",
  id: 3,
  children: [
   {
    id: 31,
    text: "测试3",
    children: [
     {
      id: 311,
      text: "测试3-1-1"
     },
     {
      id: 312,
      text: "测试3-3-2"
     }
    ]
   },
   {
    id: 32,
    text: "测试3"
   },
   {
    id: 33,
    text: "测试3"
   }
  ]
 }
];

 data(){
  return {
   station: "",
   showPicker: false,
   columns: [
    {
     values: citys, // 设置的页面初始值
     className: "column1"
    },
    {
     values: citys[0].children,
     className: "column2"
    },
    {
     values: citys[0].children[0].children,
     className: "column3"
    }
   ],
 } 
 }; 

  onConfirm(value) {
   const compact = arr => arr.filter(Boolean); // 三级联动 去除没值的,比如只有两级
   const result = compact(value);
   let str = ""; // 呈现页面显示 /xxx/xxx/xxx
   result.forEach(item => {
    str += "/" + item.text;
   });
   this.station = str;
   this.showPicker = false;
   
  const end = result[result.length - 1]; // 一般都是取最后一个id给后台的
   const id = end.id;
   console.log(id);
  },
  onChange(picker, values, index) { // 实在不行自己打印测试
   if (index == 0) {
    picker.setColumnValues(2, []); // 防止突然选中第一个,第二个是更新的,但第三个联级不更新,我暂时强制清空
   }
   let ColumnIndex = picker.getColumnIndex(index);
   console.log("第" + index + "列", "第" + ColumnIndex + "个");
   picker.setColumnValues(index + 1, values[ColumnIndex ].children || []);//点当前列更新下一列数据,防止undefined 
   
 // 当然,如果后台数据不给你想要的格式,你就按需请求一次了,比如选中第一个,取id请求接口,更新下一列。毕竟连动内容多的话,页面请求也多。但页面就不流畅,比如第一列第二列初始值。 
  // 我就是打不过后台。。。
  }

补充知识:【vant】配合 van-popup 使用 van-picker 多级联动,回显赋默认值 遇到的坑及解决方案

先吐槽一句,van-picker 真心不怎么好用。。。

页面大概是这个样子:

Vant picker 多级联动操作

代码结构大概是这个样子:

<!-- 选择 收支类型弹窗 -->
<van-popup ref = "accountTypePopup" v-model="showPicker" position="bottom">
  <van-picker
    ref = "accountTypePopup2"
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
    @change="onChange"
    
  />
</van-popup>
methods: {
  // ...
  // 修改 columns 方法
  changeColumns(p_name, name) {
    // p_name 一级分类回显值
    // name 二级分类回显值
    
    // 类型列表
    var typeList =
      this.tabActive === 0
        ? this.expendTypeList
        : this.incomeTypeList;
 
    // 设置 收支类型选项 columns 的默认值 和 子选项
    this.columns[0]["defaultIndex"] = this.columns[0][
      "values"
    ].findIndex(item => item === p_name);
 
    this.columns[1]["values"] = typeList[p_name];
 
    this.columns[1]["defaultIndex"] = this.columns[1][
      "values"
    ].findIndex(item => item === name);
  }
}

期望是:popup弹出后,picker选中用户已经选中的选项

结果是:仅第一次popup弹出后,picker选中用户已经选中的选项,之后的弹出一直展示第一次的列表

查看文档,解决方案是用van-picker的方法:

Vant picker 多级联动操作

坑就坑中,组件嵌套(popup套picker),用ref获取不到 picker 实例

咋整?

用调试工具调试了半天发现,picker实例化成DOM元素后,即使隐藏,也仅仅是display:none,不会重新实例化

那就好办了。。。

<!-- 选择 收支类型弹窗 -->
<van-popup ref = "accountTypePopup" v-model="showPicker" position="bottom">
  <van-picker
    ref = "accountTypePopup2"
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
    @change="onChange"
 
    // 这里是新加的 //
    :key = "account_type_value"
    
  />
</van-popup>

添加一个key属性,值为【一级项+二级项】,问题圆满解决!!!

以上这篇Vant picker 多级联动操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
vue实现列表拖拽排序的功能
Nov 02 #Javascript
用vue写一个日历
Nov 02 #Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 #Javascript
vant自定义二级菜单操作
Nov 02 #Javascript
JavaScript动态生成表格的示例
Nov 02 #Javascript
JavaScript实现图片放大预览效果
Nov 02 #Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 #Javascript
You might like
PHP session会话的安全性分析
2011/09/08 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
Cookie 小记
2010/04/01 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
用Python实现命令行闹钟脚本实例
2016/09/05 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
道路交通安全实施方案
2014/03/12 职场文书
车辆工程专业求职信
2014/04/28 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
致青春观后感
2015/06/09 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书