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