vue el-checkbox实现全选单选方式
作者：泡芙is
这篇文章主要介绍了vue el-checkbox实现全选单选方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue el-checkbox全选单选
要求的页面结构
是这样的
遇到了许多问题
如：点击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"> </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);
})
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。