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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
jQuery原生的动画效果
Jul 10 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
Vue程序调试的方法
Jun 17 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实现图片简单上传
2006/10/09 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
dojo 之基础篇
2007/03/24 Javascript
JS动画效果代码3
2008/04/03 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
js date 格式化
2017/02/15 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python中Threading用法详解
2017/12/27 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python字典的遍历3种方法详解
2019/08/10 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
会计出纳员的自我评价
2014/01/15 职场文书
大家访活动实施方案
2014/03/10 职场文书
广告宣传策划方案
2014/05/21 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
典型事迹材料范文
2014/12/29 职场文书
匿名检举信范文
2015/03/02 职场文书
大学团日活动总结书
2015/05/11 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python