我有一个货架的下拉菜单,数据源是后端传过来的数组,当下拉菜单选中一个货架时,在下方循环出一行一行的可选中的货架信息,只能选中一个,选中的货架信息会在右侧循环出一行一行的货架的节数信息,用elementUI或vue实现
时间: 2024-02-13 15:00:08 浏览: 22
好的,基本思路是先根据用户选择的货架ID,在Vue组件中过滤出该货架的节数信息,并且用elementUI的Table组件展示出来。具体实现如下:
1.在Vue组件中定义一个数组来存储后端传过来的货架数据,假设数组名为`shelfList`,数据格式如下:
```javascript
[
{ id: 1, name: '货架1', desc: '货架1的描述信息', floors: [
{ id: 1, name: '1层', sectionCount: 10 },
{ id: 2, name: '2层', sectionCount: 8 },
// ...
] },
{ id: 2, name: '货架2', desc: '货架2的描述信息', floors: [
{ id: 1, name: '1层', sectionCount: 12 },
{ id: 2, name: '2层', sectionCount: 6 },
// ...
] },
{ id: 3, name: '货架3', desc: '货架3的描述信息', floors: [
{ id: 1, name: '1层', sectionCount: 8 },
{ id: 2, name: '2层', sectionCount: 10 },
// ...
] },
// ...
]
```
2.使用elementUI的Select组件来实现货架的下拉选择,代码如下:
```html
<el-select v-model="selectedShelf" placeholder="请选择货架">
<el-option
v-for="shelf in shelfList"
:key="shelf.id"
:label="shelf.name"
:value="shelf.id">
</el-option>
</el-select>
```
其中,`v-model`绑定了一个名为`selectedShelf`的变量,用来存储用户选择的货架的ID。`:key`绑定了货架的ID,`:label`绑定了货架的名称,`:value`绑定了货架的ID。
3.使用elementUI的Table组件来展示选中的货架的节数信息。在Vue组件中定义一个计算属性`selectedShelfFloors`,用来根据用户选择的货架ID过滤出该货架的节数信息。然后使用elementUI的Table组件来展示节数信息,代码如下:
```html
<el-table :data="selectedShelfFloors">
<el-table-column prop="name" label="层数"></el-table-column>
<el-table-column prop="sectionCount" label="节数"></el-table-column>
</el-table>
```
其中,`:data`绑定了计算属性`selectedShelfFloors`,`:if`判断用户是否选择了货架,如果没有选择则不显示Table组件。`<el-table-column>`用来定义表格的列,`prop`属性绑定了要展示的数据字段,`label`属性绑定了列的标题。
最后,在Vue组件中定义`selectedShelf`变量,用来存储用户选择的货架ID,以及计算属性`selectedShelfFloors`,用来根据货架ID过滤出节数信息。
完整代码如下:
```html
<template>
<div>
<el-select v-model="selectedShelf" placeholder="请选择货架">
<el-option
v-for="shelf in shelfList"
:key="shelf.id"
:label="shelf.name"
:value="shelf.id">
</el-option>
</el-select>
<el-table :data="selectedShelfFloors" v-if="selectedShelf">
<el-table-column prop="name" label="层数"></el-table-column>
<el-table-column prop="sectionCount" label="节数"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
shelfList: [
{ id: 1, name: '货架1', desc: '货架1的描述信息', floors: [
{ id: 1, name: '1层', sectionCount: 10 },
{ id: 2, name: '2层', sectionCount: 8 },
// ...
] },
{ id: 2, name: '货架2', desc: '货架2的描述信息', floors: [
{ id: 1, name: '1层', sectionCount: 12 },
{ id: 2, name: '2层', sectionCount: 6 },
// ...
] },
{ id: 3, name: '货架3', desc: '货架3的描述信息', floors: [
{ id: 1, name: '1层', sectionCount: 8 },
{ id: 2, name: '2层', sectionCount: 10 },
// ...
] },
// ...
],
selectedShelf: ''
}
},
computed: {
selectedShelfFloors() {
const selectedShelf = this.shelfList.find(shelf => shelf.id === this.selectedShelf)
return selectedShelf ? selectedShelf.floors : []
}
}
}
</script>
```