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 相关文章推荐
js获得参数的getParameter使用示例
Feb 26 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
angular中的cookie读写方法
Aug 02 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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把网页保存为word文件的三种方法
2014/04/01 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python实现名片管理器的示例代码
2019/12/17 Python
django修改models重建数据库的操作
2020/03/31 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
电大自我鉴定范文
2013/10/01 职场文书
大二学期个人自我评价
2014/01/13 职场文书
法制教育演讲稿
2014/09/10 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
党员民主评议总结
2014/10/20 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
教你部署vue项目到docker
2022/04/05 Vue.js