Vue实现切换视图（表单与三列多行）的全选与清除功能：

1、表单（index.vue）

template：

	<el-button type="success" v-if="shitu==2" @click="handleSelectAll">全选</el-button>
	<el-button type="success" v-if="shitu==2" @click="handleClearCheck">清除勾选</el-button>
	
	Table区域:
	<el-table ref="multipleTable" :row-key="getRowKey" 
	@selection-change="handleSelectionChange" v-show="shitu==1" >
	
		<el-table-column type="selection" :reserve-selection="true" align="center" width="55">
		</el-table-column>//这个为勾选框
		......
		
	</el-table>
	
	<shiTu v-if="shitu==2" ref="shituDialog" />

script：

	import shiTu from "./shitu"
	export default{
		components:{
			shiTu
		},
		data(){
			return{
				tableCheckList:[],
			}
		}
	}

methods：

	getRowKey(row){//拿到该选中的表单的id
		return row.id
	},
	handleSelectionChange(val){//拿到该选中的表单的全部数据
		this.tableCheckList=val;
	},
	handleSelectAll(){//全选
		this.$refs.shituDialog.selectAll()
	},
	handleClearCheck(){//清除勾选
		if(this.shitu==2){
			this.$refs.shituDialog.checkList=[]
		}else{
			this.tableCheckList=[];
			this.$refs.multipleTable.clearSelection();
		}
	}

2、三列多行的视图（shitu.vue）

template:

<el-checkbox-group v-model="checkList">
	<ul>
		<li v-for="(item,index) in dataList">
			........
		</li>
	</ul>
</el-checkbox-group>

script:

export default{
	data(){
		return{
			checkList:[],
			dataList:[],
		}
	}
}

methods:

selectAll(){
	if(this.checkList&&this.checkList.length){
		this.checkList=[]
	}else{
		this.dataList.forEach(item=>{
			this.checkList.push(item.id)
		})
	}
}