需求: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 >

 

标签: Javascript

添加新评论