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学习笔记(三)显示当时时间的代码
Apr 08 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 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 开源AJAX框架14种
2009/08/24 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
8个PHP数组面试题
2015/06/23 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
Python制作词云图代码实例
2019/09/09 Python
python plotly画柱状图代码实例
2019/12/13 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
python实现无边框进度条的实例代码
2020/12/30 Python
python实现学生信息管理系统源码
2021/02/22 Python
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
财务科科长岗位职责
2014/03/10 职场文书
球队口号
2014/06/18 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
电气工程师岗位职责
2015/02/12 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL