需求
绘制如下画面,每一行绑定的数据都是独立的,并且还需要完成"增加行"按钮。
Vue前端代码
<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逻辑实现
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}
,区别是前者是引用,而后置是复制,如果写前者,那么数组里的元素都指向一个对象,那么就会出现下拉框的值一起联动。