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>