picker多选 vant_Vant picker 多级联动操作
官网地址:链接
官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的。
度娘也没有找到,花了大半天爬坑试错。
搭配弹出层使用
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 真心不怎么好用。。。
页面大概是这个样子:
代码结构大概是这个样子:
ref = "accountTypePopup2"
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
@change="onChange"
/>
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,不会重新实例化
那就好办了。。。
ref = "accountTypePopup2"
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
@change="onChange"
// 这里是新加的 //
:key = "account_type_value"
/>
添加一个key属性,值为【一级项+二级项】,问题圆满解决!!!
以上这篇Vant picker 多级联动操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
picker多选 vant_Vant picker 多级联动操作相关推荐
- picker多选 vant_Vant Picker 选择器
介绍 提供多个选项集合供用户选择,支持单列选择和多列级联,通常与 弹出层 组件配合使用 引入import Vue from 'vue'; import { Picker } from 'vant'; ...
- picker多选 vant_vant的Picker 选择器
货物类型,两级分类,每列都要有不限选项,数据里没有不限选项,需要做数据变异,而且选择器是通过索引取值的,比较麻烦的地方就是,修改时获取的是类别id,需要在变异的数据中找到对应项并记录其索引 click ...
- picker多选 vant_vant框架picker选择器形式列表,以及封装
以下是VantUi插件中常用的各种选择器下拉列表,项目中遇到,就在这里总结以下,下面是代码 第一种Vant -DropdownMenu 下拉框单选形式 Array = [ { text: " ...
- picker封装 uniapp_uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件 支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数 支持无限级 注意事项:插件传入数据格式为children树 ...
- uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件 支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数 支持无限级 注意事项:插件传入数据格式为children树 ...
- 微信小程序picker地区选择器显示省市二级联动
效果图: 微信官方配置二级level="city",无效(官方说正在修改2022.12.22) 自己写,用多级联动写 html: <picker mode="mul ...
- picker多选 vant_浅谈vant组件Picker 选择器选单选问题
浅谈vant组件Picker 选择器选单选问题 1.写遮罩 2.定义data 3.写事件 4.效果图 补充知识:vue使用vant编辑用户性别 我就废话不多说了,大家还是直接看代码吧~ v-model ...
- native封装卡片 react_自己动手封装一个React Native多级联动
背景 肯定是最近有一个项目,需要一个二级联动功能了! 本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封 ...
- excel图表交互联动_如何使用高大上的多级联动交互式图表来分析人员结构?
关注[新精英充电站]能力提升看得见! 众所周知,Excel中的图表是分析数据最重要一枚利器.但一般我们分析数据时使用的图表都是静态的,一个图表只能展示一个数据维度的情况,如果需要展示的数据有多个维度, ...
最新文章
- Angular NgModule 中的 declarations 和 exports定义
- 漫画:什么是数据仓库
- 服务器选购seo优化规则,网站seo优化注意事项1—域名和服务器选择
- java 对比工具_Java几款性能分析工具的对比
- java spring 面向切面编程_Spring Boot实战系列(3)AOP面向切面编程
- HDU 1117 免费馅饼 二维动态规划
- idea2019配置
- 一.用matlab生成想要的分布数据——均匀分布
- 【担心照片被冒用?】活体检测新增人脸合成图鉴别
- 3、git 暂存区撤销与删除
- 离线数仓搭建_11_DWD层用户行为日志创建
- ideaIU-2020.1下载
- 3dsmax游戏角色头部建模教程
- Android桌面小组件---Widget组件开发(什么是Widget)
- 使用 History API 构建 JavaScript 路由器
- 『津津乐道播客』世界艾滋病日话题征集
- STM8L052C6 低功耗+LCD显示 经验分享
- th:include的使用
- 设置 Application.Run(new Form1());其中form1为主窗口
- 如何恢复word文档模板和选项的默认设置