我有两个下拉菜单 分别对应着站点信息和库房信息,我想做一个关联,在选择站点下来菜单时,库房的下来菜单只有站点内的信息 该怎么写用Vue或者elementUI
时间: 2023-11-14 16:06:05 浏览: 69
你可以在 Vue 中监听站点下拉菜单的选择事件,然后根据选择的站点信息,动态更新库房下拉菜单的选项列表。以下是一个简单的示例代码:
```
<template>
<div>
<el-select v-model="selectedSite" @change="updateWarehouseOptions">
<el-option v-for="site in siteOptions" :key="site.id" :label="site.label" :value="site.value" />
</el-select>
<el-select v-model="selectedWarehouse">
<el-option v-for="warehouse in warehouseOptions" :key="warehouse.id" :label="warehouse.label" :value="warehouse.value" />
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedSite: null,
selectedWarehouse: null,
siteOptions: [
{ id: 1, label: '站点1', value: 'site1' },
{ id: 2, label: '站点2', value: 'site2' },
{ id: 3, label: '站点3', value: 'site3' }
],
warehouseOptions: [
{ id: 1, label: '库房1', value: 'wh1', site: 'site1' },
{ id: 2, label: '库房2', value: 'wh2', site: 'site1' },
{ id: 3, label: '库房3', value: 'wh3', site: 'site2' },
{ id: 4, label: '库房4', value: 'wh4', site: 'site2' },
{ id: 5, label: '库房5', value: 'wh5', site: 'site3' },
{ id: 6, label: '库房6', value: 'wh6', site: 'site3' }
]
}
},
methods: {
updateWarehouseOptions() {
// 过滤出与选择站点相同的库房选项
this.warehouseOptions = this.warehouseOptions.filter(warehouse => warehouse.site === this.selectedSite)
// 清空已选择的库房
this.selectedWarehouse = null
}
}
}
</script>
```
在上面的代码中,我们定义了两个下拉菜单,分别是站点下拉菜单和库房下拉菜单。在站点下拉菜单中,我们绑定了 `selectedSite` 变量来存储选择的站点信息,在库房下拉菜单中,我们绑定了 `selectedWarehouse` 变量来存储选择的库房信息。
在站点下拉菜单中,我们监听了 `change` 事件,并在事件处理函数中调用了 `updateWarehouseOptions` 方法来更新库房下拉菜单的选项列表。在 `updateWarehouseOptions` 方法中,我们通过过滤站点信息相同的库房选项来更新库房下拉菜单的选项列表,并清空已选择的库房信息。
阅读全文