image.png
點擊右側(cè)刪除按鈕，刪除表格中添加的數(shù)據(jù)隆夯，此時數(shù)據(jù)還未被保存在數(shù)據(jù)庫中钳恕，所以我們只需要刪除表格中的一行即可。
解決方案
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中調(diào)用該方法
methods: {
quoteDyDelete(val){
this.$emit('quoteDyDelete', val);//子組件向父組件傳值
},
然后在父組件調(diào)用的子組件中,調(diào)用方法quoteDyDelete
<j-dynamic-header-insert
v-if="tableDyShow"
:data="dataTableInsert"
:col="tableCol"
@quoteDyDelete="quoteDyDelete">
</j-dynamic-header-insert>
/*刪除新增數(shù)據(jù)*/
quoteDyDelete(val){
this.dataTableInsert.map((item,index)=>{
if(item.id === val.id){//根據(jù)id來唯一標(biāo)識列
this.dataTableInsert.splice(index,1)
return false;
}
})
},
為了標(biāo)識我們要刪除的數(shù)據(jù)蹄衷，我們在新增方法中為每條數(shù)據(jù)添加一個id
//現(xiàn)在data中先聲明tableProIndex=0然后在新增方法中添加以下代碼
this.tableProIndex += 1
tableProp.id = this.tableProIndex;
this.dataTableInsert.push(tableProp);
以上就把新增的id加到了表格的列里邊忧额，但是其中的列id并不是我們保存時需要的數(shù)據(jù)所以在保存方法中，把他刪除掉愧口，就可以了
this.dataTableInsert.map(item=>{
delete item.id;
})
