Batch delete element table

A small problem, but there are details that need attention

(1) Problem: In the beginning when I write is based on the element name is the same as to determine whether the same node, the problem is that if the two elements of the same name, will determine an error

(2) Code:

<template>
  <div class="main">
    <div style="margin-top: 20px">
      <el-button @click="handleDelete()" type="danger">批量删除</el-button>
    </div>
    <template>
    <el-table
        class="mytable"
        :data="tableData"
        stripe
        style="width: 50%"
        @selection-change="handleSelectionChange"
        >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
        prop="date"
        label="日期"
        width="180">
        </el-table-column>
        <el-table-column
        prop="name"
        label="姓名"
        width="180">
        </el-table-column>
        <el-table-column
        prop="address"
        label="地址">
        </el-table-column>
    </el-table>
</template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedData: [],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎1",
          province: "上海",
          city: "普陀区",
          address: " Jinsha River Road, Putuo District, Shanghai 1518, Lane " , 
          ZIP: 200333 
        }, 
        { 
          DATE: " 2016-05-03 " , 
          name: " Xiaohu 1 " , 
          Province: " Shanghai " , 
          City: " Putuo District " , 
          address: " Jinsha Putuo District Road Lane 1518 " , 
          ZIP: 200333 
        }, 
        { 
          DATE: " 2016-05-02 " ,
          name: " Xiaohu 2 " , 
          Province: " Shanghai " , 
          City: " Putuo District " , 
          address: " Jinsha River Road, Putuo District, Shanghai 1518, Lane " , 
          ZIP: 200333 
        }, 
        { 
          DATE: " 2016-05-04 " , 
          name: " Xiaohu 3 " , 
          Province: " Shanghai " , 
          City: " Putuo District " , 
          address:"Putuo District Jinsha Road Lane 1518 " , 
          ZIP: 200333 
        } 
      ] 
    }; 
  }, 
  Methods: { 
    the deleteRow (index, rows) { 
      rows.splice (index, . 1 ); 
    }, 
    handleSelectionChange (Data) { 
      the this .selectedData = Data; 
    }, 
    handleDelete () { 
      var that =  the this ;
       var Val =  the this .selectedData;
       IF (Val) { 
        val.forEach ( function (Item, index) {
          that.tableData.forEach(function(itemI, indexI) {
            if (item === itemI) {
              that.tableData.splice(indexI, 1);
            }
          });
        });
      }
      this.$refs.multipleTable.clearSelection();
    }
  }
};
</script>
<style scoped>
.main {
  padding: 40px;
}
.mytable {
  margin-top: 15px;
}
</style>

 

Guess you like

Origin www.cnblogs.com/excellencesy/p/11609762.html