<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
},