一、效果图
二、实现逻辑
- 将需要动态添加的表单项项的绑定值存为一个数组
- 以循环的方式展示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内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！