vue动态表格添加方法（需求：vue 动态添加el-input）
导读：一、效果图...
一 、效果图
二 、实现逻辑
将需要动态添加的表单项项的绑定值存为一个数组 以循环的方式展示form表单 点击`+`按钮触发事件 ，向数组中新加一个item 点击`-`按钮触发事件 ，根据循环的得到的index来删除数组中相对应位置的item三 、代码实现
<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>
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！