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 相关文章推荐
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
Javascript 构造函数详解
Oct 22 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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变量可用字符
2014/05/28 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python读写docx文件的方法
2018/05/08 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
pycharm快捷键汇总
2020/02/14 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
编写python代码实现简单抽奖器
2020/10/20 Python
观看信仰心得体会
2014/09/04 职场文书
学风建设演讲稿
2014/09/12 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
python3实现常见的排序算法(示例代码)
2021/07/04 Python
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
mybatis 获取更新记录的id
2022/05/20 Java/Android