Avue-crud 表格進行多選刪除，但是會刪除掉多選以外的表格數據問題

一：遇到問題

將選中的表格數據進行刪除，但是會刪掉選中之外的其他任意一條數據或多條。

 

表格代碼：其中selection-change屬性調用的方法是 用來獲取勾選中的表格數據 ，是個數組（selectionlist=[]）。

<avue-crud ref="crud" :option="tableOption" :data="tableData" style="padding: 0 10px" @selection-change="selectionChange"></avue-crud>

selectionChange(list) { this.selectionList = list; },

 

刪除代碼：自定義的openDel執行刪除功能

<div style="padding: 0 20px;">
      <el-button type="primary" size="small" icon="el-icon-delete" @click="openDel"
      >刪除</el-button>
</div>

其中this.ids是手動選中selectionList這個數組篩選出來的id，代碼如下

computed: {

　　ids() {
    　　let ids = [];
    　　this.selectionList.forEach((ele) => {
       　　ids.push(ele.$index);
    　　});
    　　return ids;
　　},

}

// 庫存選擇刪除
openDel() { if (this.selectionList.length === 0) { this.$message.warning("至少選擇一條記錄!") return } this.ids.forEach((ele) => { this.tableData.forEach((el) => { if (ele === el.$index) { var idnex = this.tableData.indexOf(el.$index) this.tableData.splice(idnex, 1) } }) }) }

 

二：解決方案

只需在刪除的方法里面加上這個方法 this.$refs.crud.selectClear()方法

selectClear()方法是用於多選表格，清空用戶的選擇

因為每次選擇表格刪除的時候，this.selectionList都會保留上一次選擇的數據，導致刪除多條不可控的數據，那么只需每次刪除完之后，清空一下選擇的數據即可，this.selectionList該數組就會變成空數組。

// 庫存選擇刪除
openDel() { if (this.selectionList.length === 0) { this.$message.warning("至少選擇一條記錄!") return } this.ids.forEach((ele) => { this.tableData.forEach((el) => { if (ele === el.$index) { var idnex = this.tableData.indexOf(el.$index) this.tableData.splice(idnex, 1) 　　　　　　　　this.$refs.crud.selectClear() } }) }) }