一開始看到van-picker的多列聯(lián)動的例子時,腦子是懵逼的,我即將要用的數(shù)據(jù)不可能這么簡單啊匪凡,這叫我咋用齐苛!
然后一頓苦思冥想,再深讀文檔內(nèi)極其稀少的信息哮奇,最后在多次嘗試后,終于把結(jié)果試出來了。沒錯浪规,真的是試出來的。
心累探孝。笋婿。。
<van-picker
show-toolbar
title="請選擇小區(qū)名稱"
:columns="columns"
value-key="name" //選項(xiàng)對象中顿颅,文字對應(yīng)的 key
@confirm="onConfirm"
@cancel="onCancel"
@change="onChange"
/>
<script>
var citys = [
{id:111,'name':'杭州'},
{id:222,'name':'寧波'},
{id:333,'name':'溫州'},
{id:444,'name':'嘉興'},
{id:555,'name':'湖州'},
];
var country = {
'杭州':[
{id:111,'name':'國杭州'},
{id:222,'name':'國寧波'},
{id:333,'name':'國溫州'},
{id:444,'name':'國嘉興'},
{id:555,'name':'國湖州'},
],
'寧波':[
{id:111,'name':'中杭州'},
{id:222,'name':'中寧波'},
{id:333,'name':'中溫州'},
{id:444,'name':'中嘉興'},
{id:555,'name':'中湖州'},
]
}
export default {
data() {
return {
columns:[
{
values: citys , //可以是數(shù)組缸濒,或者對象數(shù)組
className: 'column1' //選擇器的第一列
},
{
values: country ['杭州'], //默認(rèn)選中country對象中的第一項(xiàng)
className: 'column2', //選擇器的第二列
}
],
}
},
methods: {
onChange(picker, values) {
//在change 第一列的時候,動態(tài)更改第二列的數(shù)據(jù)
//setColumnValues是vant自帶的實(shí)例方法
//第一個參數(shù)是列數(shù)粱腻,從0開始庇配;第二個參數(shù)是第二列應(yīng)該顯示的數(shù)據(jù)
picker.setColumnValues(1, country [values[0].name]);
},
onConfirm(value) {
//將選中的文字和對應(yīng)的id拿出來使用
this.village_name = value[0].name + ',' + value[1].name;
this.village_id = value[0].id;
this.garage_id = value[1].id;
},
},
}