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()
          }
      })
   })
}