image.png
点击右侧删除按钮，删除表格中添加的数据，此时数据还未被保存在数据库中，所以我们只需要删除表格中的一行即可。
解决方案
1.在公共组件中添加删除操作的列
<el-table-column label="操作" width="80" align="center" fixed="right">
<template slot-scope="scope">
<el-button @click="quoteDyDelete(scope.row)" type="text"><i class="el-icon-delete"></i></el-button>
</template>
</el-table-column>
在methods中调用该方法
methods: {
quoteDyDelete(val){
this.$emit('quoteDyDelete', val);//子组件向父组件传值
},
然后在父组件调用的子组件中,调用方法quoteDyDelete
<j-dynamic-header-insert
v-if="tableDyShow"
:data="dataTableInsert"
:col="tableCol"
@quoteDyDelete="quoteDyDelete">
</j-dynamic-header-insert>
/*删除新增数据*/
quoteDyDelete(val){
this.dataTableInsert.map((item,index)=>{
if(item.id === val.id){//根据id来唯一标识列
this.dataTableInsert.splice(index,1)
return false;
}
})
},
为了标识我们要删除的数据，我们在新增方法中为每条数据添加一个id
//现在data中先声明tableProIndex=0然后在新增方法中添加以下代码
this.tableProIndex += 1
tableProp.id = this.tableProIndex;
this.dataTableInsert.push(tableProp);
以上就把新增的id加到了表格的列里边，但是其中的列id并不是我们保存时需要的数据所以在保存方法中，把他删除掉，就可以了
this.dataTableInsert.map(item=>{
delete item.id;
})
