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

本文小编为大家详细介绍“vue怎么实现动态添加el-input”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现动态添加el-input”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧

本文小编为大家详细介绍“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”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注恰卡网行业资讯频道。

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
后端

如何用php去除标签和空格

2022-7-1 21:57:59

后端

Springboot怎么允许logger.debug输出日志

2022-7-1 21:58:51

搜索