vue el-checkbox实现全选单选

要求的页面结构是这样的：

遇到了许多问题，如：点击tab切换后 全选按钮要点击2次可以生效。。。

我这里就不一 一多说了。直接上代码。

	 全选



	
		  {{data.productNum}} {{data.specification}}
	




export default {
		data() {
			return {
				dataList: [],
				checkArr: [],//选中数组
				isCheckedAll: false,//全选判断标识
				checkAllFlag: false,
				CheckedAllArr: [],//全选数组
			}
		},
		methods: {
			//全选
			checkAll(event){
				this.checkArr = event.target.checked ? this.CheckedAllArr : [];
			},
			//单选
			handleChecked(){
				this.isCheckedAll = this.checkArr.length == this.dataList.length;
				this.checkAllFlag = this.checkArr.length == this.dataList.length;
			},
			switchStatus(type){
				this.isCheckedAll = this.checkArr.length == this.dataList.length;
				this.checkAllFlag = this.checkArr.length == this.dataList.length;
				this.checkArr = [];
				this.queryStatus = type;
				this.getList();
			},
			//获取商品列表 type==query 模糊搜索  为空：所有商品
			getList() {
				this.$http.post("/######",{
					queryCategory: this.queryCategory,
					queryKey:this.queryKey,
					queryStatus:this.queryStatus
				},{}).then(function(res){
					this.dataList=res.body.dataList;

                    //全选后的数组
					this.setCheckedAllArr()
				}).catch(); 
			},
			setCheckedAllArr(){
				let arr = [];
				this.dataList.forEach((item,index)=>{
					this.CheckedAllArr.push(item.productId);
				})
			}
	}