Posted in Javascript onNovember 02, 2020
官网地址:链接
官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的。
度娘也没有找到,花了大半天爬坑试错。
搭配弹出层使用
<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 真心不怎么好用。。。
页面大概是这个样子:
代码结构大概是这个样子:
<!-- 选择 收支类型弹窗 --> <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的方法:
坑就坑中,组件嵌套(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 多级联动操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。
Vant picker 多级联动操作
- Author -
Posden声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@