根據多選框動態生成輸入框

做項目時遇到這樣一個需求：保函類型是多選，調後臺接口循環出來。每個保函類型後面都有保函比例(輸入框）和有效期（日期選擇器），並且填寫對應的信息。如果沒有選中保函類型，保函比例和有效期禁用。當勾選中某個保函類型的時候，其後面的保函比例和有效期就可用。回顯的時候同樣效果。
紅色框中是保函類型，綠色框是每一條保函完整的信息，包括保函類型，保函比例，有效期。效果圖如下

首先下面是html代碼

    <el-row :gutter="10">
      <el-form size="small" :label-position="label-position">
        <el-col :span="5">
          <el-form-item label-width="0">
            <el-checkbox-group v-model="checkGuarantee" @change="checks">
              <el-checkbox
                v-model="item.dictId"
                v-for="(item, index) in checkGuarantees"
                :label="item.dictName"
                :key="index">
                {{item.dictName}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-for="(item, index) in checkGuarantees" :key="index" label="保函比例" label-width="80px">
            <el-input @change="gurranteeRate" v-model.trim="item.valueInput" :disabled="disableds[index]"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item v-for="(item, index) in checkGuarantees" :key="index" label="有效期" label-width="120px">
            <el-date-picker v-model="item.valueDate" :disabled="disableds[index]" value-format="yyyy-MM-dd" type="date" placeholder="選擇日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

data中定義的數據如下

data() {
        return {
          disableds: [],  //保函比例及有效期是否禁用數組
          checkGuarantees: [],  //要循環的保函類型(從後臺獲取的數據)
          checkGuarantee: [],  //選中的保函類型
          payGuarantees: []  //選好保函後發送請求時需要的參數
        }
      }

1，因爲保函比例和有效期是根據保函類型來動態生成的，即有多少種保函類型，就會生成多少個保函比例及有效期輸入框，所以循環的時候綁定的是保函類型的數據checkGuarantees。
checkGuarantees的數據如下:

[{
        dictName: "預付款保函",
        dictId: "0234637856666576"
      },
      {
        dictName: "履約保函",
        dictId: "579832512439851"
      },
      {
        dictName: "質量保函",
        dictId: "076632453263252"
      }]

2,頁面初始化的時候，調接口得到checkGuarantees，循環出保函類型。保函類型多選框選中的值是保函類型的label，裏面沒有保函比例和有效期，所以往保函對象裏添加保函比例和有效期字段。同時輸入框和日期選擇器
（後面全簡稱爲輸入框）是否禁用，剛開始全設置爲不可用狀態。代碼如下

// 進入頁面時，首先將所有的保函類型展示出來 調接口獲取數據
          const guaranteeType = { dictTypeCode: "CONTRACT_TYPE" }; //請求參數
          contractAddApi.getDict(guaranteeType) //發送請求
            .then((res) => {
              const datas = res.data; //  後臺返回的數據
              for (var i = 0; i < datas.length; i++) {
                // 這裏是初始化往保函類型對象中添加保函比例和有效期以及id字段，並且將它們放在同一個對象裏面
                let item = {
                  dictName: datas[i].dictName,
                  dictId: datas[i].dictId,
                  valueInput: "", //保函比例綁定的值
                  valueDate: ""  //有效期綁定值
                };
                //將添加完的對象添加到checkGuarantees數組中去
                this.checkGuarantees.push(item);
              }
              // 初始的時候讓所有的輸入框禁用
              for (var i = 0; i < this.checkGuarantees.length; i++) {
                this.disableds.push(true);
              }
            })
            .catch((error) => {

            });

此時就會得到如下效果

3，保函類型的change事件，當選中某個保函的時候其後面的輸入框可用狀態。代碼如下

checks(val) {
          this.disableds = [];
          this.checkGuarantees.forEach((v, i) => {
            this.disableds.push(true);
            this.checkGuarantee.forEach((_v, _i) => {
              if (v.dictName == _v) {
                this.disableds[i] = false;
              }
            })
          });
        }

選好保函類型，填寫完其後面的保函比例和有效期後得到checkGuarantees的數據如下

      [{
        dictName: "預付款保函",
        dictId: "0234637856666576"
      },
      {
        dictName: "履約保函",
        dictId: "579832512439851"
      },
      {
        dictName: "質量保函",
        dictId: "076632453263252"
      }]

      [{
        dictName: "預付款保函",
        dictId: "0234637856666576",
        valueInput: "1",
        valueDate: "2018-12-25"
      },
      {
        dictName: "履約保函",
        dictId: "579832512439851",
        valueInput: "",
        valueDate: null
      },
      {
        dictName: "質量保函",
        dictId: "076632453263252",
        valueInput: "3",
        valueDate: "2019-01-05"
      }]

5，將選中的checkGuarantee多選框數據以及填寫完信息後的checkGuarantees數據（包括選中以及沒選中的所有信息）循環，將checkGuarantee中的數據（即選中的數據）與checkGuarantees中的dictName相比較，如果相等說明這條保函被選中了，就push到payGuarantees，循環完後就可以得到要發給後臺的數據了。payGuarantees最終的數據如下

[{
        dictName: "預付款保函",
        dictId: "0234637856666576",
        valueInput: "1",
        valueDate: "2018-12-25"
      },
      {
        dictName: "質量保函",
        dictId: "076632453263252",
        valueInput: "3",
        valueDate: "2019-01-05"
      }]

6，數據回顯，將後臺返回的數據payGuarantees以及checkGuarantees循環比較出保函類型相同的項，將其push到多選框綁定的值checkGuarantee中，這樣多選框選中狀態就會回顯。然後將其對應的保函比例和有效期賦值給checkGuarantees中對應條的保函信息，這樣填寫的保函比例和有效期就能顯示出來了。最後將checkGuarantees再循環一次，顯示輸入框是否禁用的狀態。代碼如下

// 數據回顯 data.payGuarantees後臺返回的數據(保函類型，保函比例，有效期)
        data.payGuarantees.forEach((v, i) => {
          this.checkGuarantees.forEach((_v, _i) => {
            if (v.dictName == _v.dictName) {
              this.checkGuarantee.push(v.dictName);
              _v.valueInput = v.valueInput;
              _v.valueDate = v.valueDate;
              _v.dictId = v.dictId;
            }
          })
        })
        
        // 再將輸入框和日期選擇器是否禁用循環一次
        this.disableds = [];
        this.checkGuarantees.forEach((v, i) => {
          this.disableds.push(true);
          this.checkGuarantee((_v, _i) => {
            if (v.dictName == _v) {
              this.disableds[i] = false;
            }
          })
        })

以上就是我實現根據多選框動態生成輸入框，並且將其回顯的做法。方法雖笨，但還是有用的。如果小夥伴們發現更好的方法,希望能告訴我一下！