1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
| <template>
<div class="container">
<el-row>
<el-col :span="4">
<!-- 左边列表项 -->
<div class="scrollable-menu">
<el-menu
class="el-menu-vertical-demo"
background-color="#304156"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item
v-for="item in items"
:key="item.id"
:index="item.id.toString()"
@click="selectItem(item)"
>
<i class="el-icon-menu"></i>
{{ item.name }}
</el-menu-item>
</el-menu>
</div>
</el-col>
<el-col :span="12">
<!-- 右边选中的数据和数量 -->
<div
v-for="(selectedItem, index) in selectedItems"
:key="index"
class="item-container"
>
<div class="flex-container">
<span class="item-name">{{ selectedItem.name }}</span>
<el-input
type="number"
:min="1"
v-model.number="selectedItem.quantity"
class="quantity-input"
@change="updateQuantity(selectedItem.id, selectedItem.quantity)"
></el-input>
<el-button type="danger" @click="removeItem(index)">移除</el-button>
</div>
</div>
<el-button type="primary" @click="addSelectedItem">提交</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{id: 1, name: '数据1'},
{id: 2, name: '数据2'},
{id: 3, name: '数据3'},
{id: 4, name: '数据4'},
{id: 5, name: '数据5'},
{id: 6, name: '数据6'},
{id: 7, name: '数据7'},
{id: 8, name: '数据8'},
{id: 9, name: '数据9'},
{id: 10, name: '数据10'},
// 假设这里有很多数据项...
],
selectedItems: [],
};
},
methods: {
selectItem(item) {
const existingItem = this.selectedItems.find((x) => x.id === item.id);
if (existingItem) {
existingItem.quantity += 1;
} else {
this.selectedItems.push({...item, quantity: 1});
}
},
removeItem(index) {
this.selectedItems.splice(index, 1);
},
updateQuantity(id, quantity) {
const item = this.selectedItems.find((x) => x.id === id);
if (item) {
item.quantity = quantity;
}
},
addSelectedItem() {
console.log(this.selectedItems)
},
},
};
</script>
<style scoped>
.container {
//margin: 30px;
}
.scrollable-menu {
max-height: 400px; /* 可调整为适合的高度 */
overflow-y: auto;
}
.item-container {
margin-bottom: 10px;
}
.flex-container {
display: flex;
align-items: center;
width: 100%;
}
.quantity-input {
margin-right: 10px;
}
.item-name {
margin-right: 10px;
}
.el-input {
width: 50%;
}
.el-button {
text-align: center;
}
</style>
|