(vant—picker 多列联动)
以下进入正题-------------------------------------------------------
界面控件规划
data()里面数据定义
citys: {},
columns: [],
从后端获取到的动态数据
dataSource: {
code: 0,
msg: "成功",
data: [
{
id: 4,
parentId: null,
itemCategory: "电脑产品分类",
number: "123456",
createDate: "2019-09-27 15:30:52",
remarks: "",
subsetItem: [
{
id: 5,
parentId: 4,
itemCategory: "联想",
number: "147",
createDate: "2019-09-27 15:30:52"
},
{
id: 6,
parentId: 4,
itemCategory: "华硕",
number: "250",
createDate: "2019-09-27 15:30:52"
}
]
},
{
id: 7,
parentId: null,
itemCategory: "办公用品分类",
number: "123456",
createDate: "2019-09-29 11:42:07",
remarks: "办公用品",
subsetItem: [
{
id: 8,
parentId: 7,
itemCategory: "文件夹",
number: "123",
createDate: "2019-09-29 11:42:07"
},
{
id: 9,
parentId: 7,
itemCategory: "记事本",
number: "1232",
createDate: "2019-09-29 11:42:07"
}
]
},
{
id: 10,
parentId: null,
itemCategory: "材料、设备供应类",
number: "147258",
createDate: "2019-09-29 14:03:41",
remarks: "测试",
subsetItem: [
{
id: 11,
parentId: 10,
itemCategory: "防水材料",
number: "1234",
createDate: "2019-09-29 14:03:41"
},
{
id: 12,
parentId: 10,
itemCategory: "石棉瓦",
number: "147",
createDate: "2019-09-29 14:03:41"
},
{
id: 13,
parentId: 10,
itemCategory: "钢筋",
number: "12344",
createDate: "2019-09-29 14:03:41"
},
{
id: 14,
parentId: 10,
itemCategory: "混凝土",
number: "25863",
createDate: "2019-09-29 14:03:41"
},
{
id: 15,
parentId: 10,
itemCategory: "门、窗",
number: "234",
createDate: "2019-09-29 14:03:41"
}
]
}
]
}
};
初始化test()方法
mounted() {
this.test();
},
methods里面的test()函数实现将从后端接收的数据封装为这种格式
//仅仅只是示例 作为参考 与其他代码无关
/**const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州']
};*/
methods: {
//onchange方法的触发,乐意实现动态数据联动
onChange(picker, values) {
picker.setColumnValues(1, this.citys[values[0]]);
},
test() {
let data_com = this.dataSource.data;
let res = {};
data_com.forEach(function(v, i, origin) {
if (!res[v.itemCategory]) {
res[v.itemCategory] = [];
v.subsetItem.forEach(function(vv, ii, origin_son) {
res[v.itemCategory].push(vv.itemCategory);
});
}
});
this.citys = res;
this.columns = [
{
values: Object.keys(this.citys),
className: "column1"
},
{
values: this.citys[0],
className: "column2",
defaultIndex: 2
}
];
console.log(this.citys);
}
}
![Alt](http://img.e-com-net.com/image/info8/26a8f21708c24b55b0b71342ac4983f5.gif)