vxe-table 从页面批量删除数据 （不动数据库里的数据）

​
<vxe-table v-if="options"
        ref="vxeTable"
        border
        :column-config="{resizable: true}"
        :row-config="{isCurrent: true, isHover: true,keyField:'id'}"
        :checkbox-config="{range: true,reserve: true,trigger: 'row'}"
        @checkbox-all="selectAllEvent"
        @checkbox-change="selectChangeEvent"
        v-loading="options.loading"
      >
      <vxe-table-column type="checkbox" width="38"></vxe-table-column>
</vxe-table>

​ <div class="btn-del">
          <vxe-button status="primary" @click="markedDelHandle"
:disabled="disableHandle">Marked Del</vxe-button>
          <vxe-button @click="UnMarkedDelHandle" :disabled="disableHandle">UnMarkedDelHandle</vxe-button>
      </div>

思路：先将选中数据保存在新数组arr中 然后定义一个空数组datas，遍历表格所有数据(这里是options.data)  如果不存在选定的数组arr 就把表格其他数据添加到空数组datas中 然后页面只显示新的datas。

 // 全选
    selectAllEvent ({ checked, records}) {
      this.filterData = records;
      this.checkedList= records;

      // 无选中数据时禁用按钮
       if (records && records.length) {
          this.disableHandle = false;
      } else{
          this.disableHandle = true;
      }

      console.log(checked ? '所有勾选事件' : '所有取消事件', records)
        this.$emit("checkChanged", records);
    },
    // 复选
    selectChangeEvent ({ checked, records }) {
      this.filterData = records;
      this.checkedList= records;

       if (records && records.length) {
          this.disableHandle = false;
      } else{
          this.disableHandle = true;
      }

      console.log(checked ? '勾选事件' : '取消事件', records)
        this.$emit("checkChanged", records);
    },


     // 删除选中行数据
     markedDelHandle (){
         let arr=this.checkedList;  //选中的数据
         let datas = [];

         this.options.data.forEach((item)=>{
             if(arr.indexOf(item) === -1 ){  
                 datas.push(item) 
             }
         })

         this.options.data = datas
        },

        // 保留选中行数据
        UnMarkedDelHandle (){
             this.options.data = this.checkedList
            },