需求：vue 動態添加el-input

一、效果圖

二、實現邏輯

• 將需要動態添加的表單項項的綁定值存為一個數組
• 以迴圈的方式展示form表單
• 點擊`+`按鈕觸發事件，向數組中新加一個item
• 點擊`-`按鈕觸發事件，根據迴圈的得到的index來刪除數組中相對應位置的item

三、代碼實現

<template>
  <div>
    <el-button @click="isDilogShow = true" plain>動態添加input</el-button>
    <el-dialog
      title="特工安排"
      :visible.sync="isDilogShow"
      :close-on-click-modal="false"
      width="400px"
    >
      <el-form ref="form" :model="form">
        <el-form-item>
          <div v-for="(item, index) in List" :key="index" class="content">
            <el-form-item>
              <el-input
                class="numrule"
                type="number"
                style="max-width: 130px"
                v-model.number="item.num"
                placeholder="請輸入代號"
                @input="
                  (val) => {
                    handleNumChange(val, index)
                  }
                "
              ></el-input>
              <span>搭檔為</span>
              <el-select
                v-model="item.name"
                placeholder="請選擇"
                style="max-width: 130px"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
              <!-- 若表單中沒有值則不可以新增item(可根據自己的需求進行更改哦) -->
              <span
                v-if="index === 0"
                :class="
                  item.num === null || item.name === ''
                    ? 'change-icon-add'
                    : 'change-icon'
                "
                ><i
                  :style="{
                    pointerEvents:
                      item.num === null || item.name === '' ? 'none' : 'auto',
                  }"
                  class="el-icon-circle-plus-outline"
                  @click="addItem()"
                ></i
              ></span>
              <span v-else class="change-icon" @click="deleteItem(index)"
                ><i class="el-icon-remove-outline"></i
              ></span>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="isDilogShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">確認</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      isDilogShow: false,
      form: {
        name: "",
      },
      List: [{ num: "", name: "" }],
      userList: [
        { id: 1, name: "麻雀" },
        { id: 2, name: "夜鶯" },
        { id: 3, name: "百靈" },
      ],
    }
  },
  methods: {
    handleNumChange(v, i) {
      console.log(v)
      console.log(i)
    },
    onSubmit() {
      console.log("submit!")
    },
    // 新增任務分配
    addItem() {
      this.List.push({
        num: "",
        name: "",
      })
    },
    deleteItem(i) {
      this.List.splice(i, 1)
    },
  },
}
</script>

<style lang="scss">
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  span{
    margin: 0 8px;
  }
  .change-icon {
    font-size: 26px;
    cursor: pointer;
  }
  // 點擊事件是否可用 ----> pointer-events:none;
  .change-icon-add {
    font-size: 26px;
    cursor: no-drop;
  }
}
.numrule {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  /* Firefox瀏覽器 */
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>