element table批量删除

很小的一个问题,可是有细节须要注意this

(1)问题:在起初我写的时候是根据元素的name是否相同判断是不是同一个节点,出现的问题就是,若是说两个元素的name相同,就会判断出错spa

(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: "上海市普陀区金沙江路 1518 弄", zip: 200333 }, { date: "2016-05-03", name: "王小虎1", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333 }, { date: "2016-05-02", name: "王小虎2", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333 }, { date: "2016-05-04", name: "王小虎3", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333 } ] }; }, methods: { deleteRow(index, rows) { rows.splice(index, 1); }, handleSelectionChange(data) { this.selectedData = data; }, handleDelete() { var that = this; var val = 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>

相关文章
相关标签/搜索