vue怎么实现动态添加el-input

本文小编为大家详细介绍“vue怎么实现动态添加el-input”，内容详细，步骤清晰，细节处理妥当，希望这篇“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"
                
                v-model.number="item.num"
                placeholder="请输入代号"
                @input="
                  (val) => {
                    handleNumChange(val, index)
                  }
                "
              ></el-input>
              <span>搭档为</span>
              <el-select
                v-model="item.name"
                placeholder="请选择"
                
              >
                <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 >
          <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>

读到这里，这篇“vue怎么实现动态添加el-input”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。