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>

相關文章
相關標籤/搜索