需求：vue 动态添加el-input

<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>