溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關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 真心不怎么好用。。。
頁面大概是這個樣子：
代碼結構大概是這個樣子：
<!-- 選擇 收支類型彈窗 -->
<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 實現多級聯動的方法，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
