首页 >> js开发 >> jsVant picker 多级联动操作js大全
jsVant picker 多级联动操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
官网地址：链接链接官网文档可能不是很完善，但仔细看文档，方法，类型其实都讲到的。度娘也没有找到，花了大半天爬坑试错。搭配弹出层使用搭配弹出层使用
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请求接口，更新下一列。毕竟连动内容多的话，页面请求也多。但页面就不流畅，比如第一列第二列初始值。
// 我就是打不过后台。。。
}
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 多级联动，回显赋默认值 遇到的坑及解决方案补充知识：补充知识：【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);
}
}
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的方法：查看文档，解决方案是用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"
/>
ref = "accountTypePopup2"
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
@change="onChange"
// 这里是新加的 //
:key = "account_type_value"
/>
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请求接口，更新下一列。毕竟连动内容多的话，页面请求也多。但页面就不流畅，比如第一列第二列初始值。
// 我就是打不过后台。。。
}
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 多级联动，回显赋默认值 遇到的坑及解决方案补充知识：补充知识：【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);
}
}
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的方法：查看文档，解决方案是用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"
/>
ref = "accountTypePopup2"
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
@change="onChange"
// 这里是新加的 //
:key = "account_type_value"
/>
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
