Vue-ts-优雅的响应式对象数组（reactive型数组）

需求

绘制如下画面，每一行绑定的数据都是独立的，并且还需要完成"增加行"按钮。

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}，区别是前者是引用，而后置是复制，如果写前者，那么数组里的元素都指向一个对象，那么就会出现下拉框的值一起联动。