需求
绘制如下画面，每一行绑定的数据都是独立的，并且还需要完成”增加行”按钮。
Vue前端代码
language-html1
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
| <el-button @click="addLine">增加行</el-button>
<el-row>
<el-col :span="4" align="middle">产品</el-col>
<el-col :span="4" align="middle">仓库</el-col>
<el-col :span="4" align="middle">批次号</el-col>
<el-col :span="4" align="middle">库存数量</el-col>
<el-col :span="4" align="middle">隔离数量</el-col>
</el-row>
<el-form>
<el-row v-for="(item, i) in inItemNums">
<el-col :span="4">
<el-select v-model="inQueryParams[i].product" placeholder="请选择产品" @change="inSelectProductChange(i)">
<el-option
v-for="item in inSelectOption[i].product"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="inQueryParams[i].factory" placeholder="Select" @change="inSelectFactoryChange(i)">
<el-option
v-for="item in inSelectOption[i].factory"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="inQueryParams[i].batchNum" placeholder="Select" @change="inSelectBatchNumChange(i)">
<el-option
v-for="item in inSelectOption[i].batchNum"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="4">
<el-input v-model="inQueryParams[i].stockQuantity" readonly></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="inQueryParams[i].isolateQuantity"></el-input>
</el-col>
</el-row>
</el-form>
|
Vue逻辑实现
language-typescript1
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
| interface IselectOptionItem {
product: [],
factory: [],
batchNum: [],
isolateQuantity: []
}
const selectOptionItem = {
product: [],
factory: [],
batchNum: [],
isolateQuantity: []
}
interface IqueryParamsItem {
product: undefined,
factory: undefined,
batchNum: undefined,
stockQuantity: undefined,
isolateQuantity: undefined
}
const queryParamsItem = {
product: undefined,
factory: undefined,
batchNum: undefined,
stockQuantity: undefined,
isolateQuantity: undefined
}
const inItemNums = ref(5);
const inSelectOption = reactive<IselectOptionItem []>([])
for (let i = 0; i < inItemNums.value; i++) {
inSelectOption.push({
...selectOptionItem})
}
const inQueryParams = reactive<IqueryParamsItem[]>([]);
for (let i = 0; i < inItemNums.value; i++) {
inQueryParams.push({
...queryParamsItem})
}
const addLine=()=>{
inSelectOption.push({
...selectOptionItem})
inQueryParams.push({
...queryParamsItem})
inItemNums.value = inItemNums.value+1;
}
|
注意点
往数组添加元素时，不使用selectOptionItem而是{...selectOptionItem}，区别是前者是引用，而后置是复制，如果写前者，那么数组里的元素都指向一个对象，那么就会出现下拉框的值一起联动。
