需求场景:我是从表格获取行数据拿到 仓库id 【数组第一个是仓库id】和库位id【数组第二个是库位id】,根据id来回显数据。数据如下
[
"0303a92c-14ad-4981-862e-570148cb3e77",
"0303a92c-14ad-4981-862e-570148cb3e77"
]
我踩的坑:我是获取了仓库id再去请求库位id,这就是局部加载了数据。重点:没有加载全部数据,是不可能回显数据的。然后根据v-model就可以做到回显数据了。就是处理仓库库位的数据要费脑子
html
<el-cascader :options="warehouses" clearable style="width: 360px;" v-model="warehousesValue" ref="cascader"
placeholder="请选择贮存仓库" @expand-change="handleChange" @change="handleChange2">
</el-cascader>
data
// 贮存仓库
warehouses: [],
warehousesValue: [],
js下面的方法是页面一加载就要调用
warehouseMs() {
let keys = {
order: "desc",
page: '1',
rows: '9999',
sort: "CreateTime",
"wheres": JSON.stringify([])
};
this.http.post("", keys, true)
.then(result => {
const requests = result.rows.map(item => {
return this.http.post("", {
order: "desc",
page: '1',
rows: '9999',
sort: "CreateTime",
"wheres": JSON.stringify([{
name: "WareHouseId",
value: item.WareHouseId
}])
}, true);
});
Promise.all(requests)
.then(locationResults => {
locationResults.forEach((locations, index) => {
const warehouse = {
value: result.rows[index].WareHouseId,
label: result.rows[index].Name,
children: locations.rows.map(location => {
return {
value: location.WareHouseId,
label: location.Name
};
})
};
this.$set(this.warehouses, index, warehouse);
});
})
.catch(error => {
// 处理请求错误
});
})
.catch(error => {
// 处理请求错误
});
},