Vue 点击添加一行和删除一行
我用的是:vue + element ui 直接代码。html:<template><el-main><el-col :span="24" class="warp-main" v-loading=""><el-form :inline="true" class="demo-form-inline" v-for="(i...
·
我用的是:vue + element ui 直接代码。
html:
<template>
<el-main>
<el-button type="primary" @click="add">增加更多</el-button>
<el-col :span="24" class="warp-main">
<el-form :inline="true" class="demo-form-inline" v-for="(item, index) in formArr" :key="index">
<el-form-item label="样例">
<el-input v-model="item.value"></el-input>
</el-form-item>
<el-button type="primary" @click="del(index)">删除</el-button>
</el-form>
</el-col>
</el-main>
</template>
逻辑:
<script>
export default {
data () {
return {
formArr: [
{
value: ''
}
]
}
},
methods: {
add() {
this.formArr.push({
value: ''
})
console.log(this.formArr)
},
del(index) {
this.formArr.splice(index, 1)
}
}
}
</script>
注释:
通过对数组的操作,进行添加和删除;
更多推荐
已为社区贡献3条内容
所有评论(0)