我有一个货架的下拉菜单,数据源是后端传过来的数组,当下拉菜单选中一个货架时,在下方循环出一行一行的可选中的货架信息,只能选中一个,用elementUI或vue实现
时间: 2024-02-13 21:00:06 浏览: 174
用c实现的商品货架算法.rar_货架
好的,基本思路是先通过elementUI的Select组件实现货架的下拉选择,然后在下方用elementUI的Table组件展示可选中的货架信息。具体实现如下:
1.在Vue组件中定义一个数组来存储后端传过来的货架数据,假设数组名为`shelfList`,数据格式如下:
```javascript
[
{ id: 1, name: '货架1', desc: '货架1的描述信息' },
{ id: 2, name: '货架2', desc: '货架2的描述信息' },
{ id: 3, name: '货架3', desc: '货架3的描述信息' },
// ...
]
```
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组件来展示可选中的货架信息,代码如下:
```html
<el-table :data="shelfList" v-if="selectedShelf">
<el-table-column prop="name" label="货架名称"></el-table-column>
<el-table-column prop="desc" label="货架描述"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-radio
v-model="selectedShelfItem"
:label="scope.row"
:disabled="selectedShelfItem && selectedShelfItem.id !== scope.row.id">
</el-radio>
</template>
</el-table-column>
</el-table>
```
其中,`:data`绑定了`shelfList`数组,`:if`判断用户是否选择了货架,如果没有选择则不显示Table组件。`<el-table-column>`用来定义表格的列,`prop`属性绑定了要展示的数据字段,`label`属性绑定了列的标题。
在操作列中,我们用了一个`<el-radio>`组件来实现单选功能。`v-model`绑定了一个名为`selectedShelfItem`的变量,用来存储用户选择的货架信息。`:label`绑定了当前行的数据对象`scope.row`,`:disabled`属性用来判断当前行是否可以选中,如果当前已经有选中的货架信息,且当前行的ID不等于已选中的货架ID,则禁用该行的选择。
最后,在Vue组件中定义`selectedShelf`和`selectedShelfItem`两个变量,用来存储用户选择的货架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="shelfList" v-if="selectedShelf">
<el-table-column prop="name" label="货架名称"></el-table-column>
<el-table-column prop="desc" label="货架描述"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-radio
v-model="selectedShelfItem"
:label="scope.row"
:disabled="selectedShelfItem && selectedShelfItem.id !== scope.row.id">
</el-radio>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
shelfList: [
{ id: 1, name: '货架1', desc: '货架1的描述信息' },
{ id: 2, name: '货架2', desc: '货架2的描述信息' },
{ id: 3, name: '货架3', desc: '货架3的描述信息' },
// ...
],
selectedShelf: '',
selectedShelfItem: null
}
}
}
</script>
```
阅读全文