vue el-checkbox实现全选单选

最新推荐文章于 2025-07-25 09:20:57 发布

原创最新推荐文章于 2025-07-25 09:20:57 发布 · 1.2w 阅读

12 ·

CC 4.0 BY-SA版权

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

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

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

<el-row class="list-header">
	<el-col :span="6"><el-checkbox class="checkbox" :checked="isCheckedAll" v-model="checkAllFlag" @change="checkAll"> 全选</el-checkbox></el-col>
</el-row>

<el-row class="list-header">
	<el-checkbox-group v-model="checkArr"  @change="handleChecked">
		<el-checkbox class="checkbox" :label="data.productId">&nbsp;</el-checkbox> {{data.productNum}}<span class="col-b"> {{data.specification}}</span>
	</el-checkbox-group>
</el-row>



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);
				})
			}
	}