在Vue中使用form表单点击增行删行操作
首先使用model绑定表单数据,使用v-for遍历snForm下的数组;
增行: 点击按钮新增一条sn进去
删行: 使用splice方法删除对应index的行
<el-form :model="snForm">
<div v-for="(item, index) in snForm.productSnList" :key="index">
<el-form-item label="产品SN" :prop="'productSnList.' + index + '.sn'">
<el-input v-model="item.sn" autocomplete="off" clearable style="width: 200px" />
<el-button type="danger" @click="deletSnRow">删除</el-button>
</el-form-item>
</div>
</el-form>
snForm: {
productSnList: [
{ sn: '' }
]
},
// 增行按钮
addRow() {
this.snForm.productSnList.push({
sn: ''
})
},
// 删行按钮
deletSnRow(index) {
this.snForm.productSnList.splice(index, 1);
},