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>

到此这篇关于vue 动态添加el-input的文章就介绍到这了,更多相关vue 动态添加el-input内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！