有两个下拉菜单,分别是所属站点下拉菜单、所属库房下拉菜单,库房是存在站点下面的,我想把这两个下拉菜单关联,选择站点菜单时,,库房下拉菜单只会出现该站点下的库房信息,数据由后端java提供,后端采用springboot,前端采用vue或elementUi 教我怎么写
时间: 2023-10-08 08:07:38 浏览: 128
首先,你需要在后端Java中编写一个接口来获取特定站点下的库房信息。例如,你可以编写一个 `GET` 接口,它将采用站点ID作为参数,并返回该站点下的库房信息列表。
在前端Vue或ElementUI中,你可以使用 `watch` 属性来监听站点下拉菜单的变化,并在其值更新时调用后端接口来获取相应的库房信息列表。然后,你可以在库房下拉菜单中使用 `v-for` 指令来循环遍历该列表,并动态生成选项。
下面是一个示例代码,可能需要根据你的具体情况进行修改:
```vue
<template>
<div>
<el-select v-model="selectedSite" placeholder="请选择站点" @change="getWarehouses">
<el-option v-for="site in sites" :key="site.id" :label="site.name" :value="site.id"></el-option>
</el-select>
<el-select v-model="selectedWarehouse" placeholder="请选择库房">
<el-option v-for="warehouse in warehouses" :key="warehouse.id" :label="warehouse.name" :value="warehouse.id"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedSite: '',
selectedWarehouse: '',
sites: [],
warehouses: []
};
},
watch: {
selectedSite: function() {
this.getWarehouses();
}
},
methods: {
getSites() {
// 调用后端接口获取站点列表
// ...
this.sites = response.data;
},
getWarehouses() {
// 调用后端接口获取特定站点下的库房列表
// 使用 selectedSite 作为参数
// ...
this.warehouses = response.data;
}
},
mounted() {
this.getSites();
}
};
</script>
```
请注意,这只是一个简单的示例代码,可能需要根据你的具体情况进行修改和完善。
阅读全文