本文小编为大家详细介绍“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”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
