el-table實現多選及反選

<template>
	<div>
		<div>
			<el-button type="primary" size="small" @click="reverseElectionClick()">反選</el-button>
		</div>
		<el-table ref="multipleTable" @selection-change="handleSelectionChange" tooltip-effect="dark" :data="tableData" style="width: 100%" height="650">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="startTime" label="開始時間"></el-table-column>
          <el-table-column prop="endTime" label="結束時間"></el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <el-button type="danger" size="small" @click="delClick(scope.row)">刪除</el-button>
            </template>
          </el-table-column>
        </el-table>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				tableData: [], // 表格數據
				multipleSelection: [], // 選擇后的數據
			}
		},
		methods:{
			/**
			* el-table點擊選擇操作
			*/
			handleSelectionChange(val){
				this.multipleSelection = val;
			},
			
			/**
			* 反選
			*/
			reverseElectionClick(){
				this.tableData.forEach(item=>{
					let flg = false;
					this.multipleSelection.forEach(el=>{
						// 判斷在選擇的數據中是否存在tableData里的數據,如果存在,證明已經是選中狀態,讓其取消選擇
						if (item.id == el.id){
							flg = true;
						}
					});
					// 取反, 如果flg為true,讓當前行(item)取消選擇,flg為false,讓當前行(item)選中
					if (flg){
						this.$refs.multipleTable.toggleRowSelection(item,false);
					} else {
						this.$refs.multipleTable.toggleRowSelection(item,true);
					}
				})
			},
		}
	}
</script>