vue项目两级全选(多级原理也一样),感觉有点意思,随手一记
需求:
首先说一下思路:我首先把数据列表两级遍历了一下,增加了一个checked属性来控制勾选和不勾线
this.productList.forEach((item)=>{
this.$set(item,"checked",false);
item.goodList.forEach((subItem)=>{
this.$set(subItem,"checked",false);(我这里用$set,添加属性,
因为vue是数据挟持的原理,他通过Object.defineProperty来监听属性的变化,我防止层级太深,
属性变化vue监听不到(或者监听到了dom渲染不了),如果监听到了你可以不加,加了肯定是对的)
})
})
页面结构
<div>
<p>
<span class="checkSpan"><input type="checkbox" v-model="checkAll" @change="selectAll"><label></label>全选</span></p>
<div class="itemSection" v-for="(item,index) in productList">
<div class="item-top">
<span class="checkSpan"><input type="checkbox" v-model="item.checked" @change="selectItem1(item,productList)"><label></label>{{item.typeName}}</span>
</div>
<div class="subItemSection">
<div class="subItem" v-for="(subItem,subIndex) in item.goodList">
<div class="">
<span class="checkSpan"><input type="checkbox" v-model="subItem.checked" @change="selectItem2(item,productList)"><label></label>{{subItem.goodName}}</span></div>
</div>
</div> </div>
</div>
以下步骤是建立在你把数据循环遍历加了一个checked属性的基础上实现的
1第一步全选 checkAll:false,
selectAll(){
this.productList.forEach(item=>{
item.checked=this.checkAll;
item.goodList.forEach(subItem=>{
subItem.checked=this.checkAll;
})
})
},//定一个变量,你通过全选的变量来递归让所有的数据勾选或不勾选
2第二步
selectItem1(item,productList){
let firstItem=productList.every(item=>{
return item.checked==true;
}) //这步所有的一级,度勾选控制全选勾选
if(firstItem){
this.checkAll=true;
}else{
this.checkAll=false;
}
item.goodList.forEach(subItem=>{
subItem.checked=item.checked;
})//控制二级的勾选
},
3这里都是针对的都是当前的二级
selectItem2(item,productList){ let lengths=item.goodList.length;
let checkeds=item.goodList.filter(subItem=>{
return subItem.checked==true;
});
if(lengths==checkeds.length){
item.checked=true;//2级勾选的数量和二级的数量相同,让一级勾选
let firstItem=productList.every(item=>{
return item.checked==true;
})//所有二级勾选控制一级勾选,然后让全选勾选,或者不勾选
if(firstItem){
this.checkAll=true;
}else{
this.checkAll=false;
}
}else{
item.checked=false;
this.checkAll=false;
}
},
chooseProduct(){
this.saveSelectProduct=[];
this.productList.forEach(item=>[
item.goodList.forEach(subItem=>{
if(subItem.checked==true){
this.saveSelectProduct.push({
goodName:subItem.goodName,
goodId:subItem.id
})
}
})
]);
this.productVisible=false; let productNameList=this.saveSelectProduct.map(item=>{
return item.goodName
})
this.ruleForm.productJson=productNameList.toString(); },
上面是拿到所有勾选的值,然后该干嘛干嘛
vue项目两级全选(多级原理也一样),感觉有点意思,随手一记的更多相关文章
- VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue实现商品购物车全选与全不选项目实战
项目需求: 实现一个购物车 全选框实现对商家和商品的全选 商家全选框实现对当前商家所有商品的全选 取消其中一个商品则取消对应商家全选和全选框 选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选 ...
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- 第八十二篇:Vue购物车(三) 实现全选功能
好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...
- vue day7 table checkbox 全选
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue实现简单的全选、反选、不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue的el-select标签全选以及出现需要有禁用选项
首先说一下遇到这种问题的解决思路吧,很简单先去https://element.eleme.cn/#/zh-CN 这个官网上找到对应的需求,然后就是拼接数据的问题. 以下是全选的例子: <el-s ...
- vue+vant 购物车的全选和反选
https://blog.csdn.net/wjswangjinsheng/article/details/91392694
- vue 项目 多选 问题
近期 vue 项目用到多选功能,引用的elementUI的级联多选 Cascader,但是没有效果. 后来发现是elementUI版本问题,我们项目用的是2.7.2版本,版本太低. 后来 卸载了 重新 ...
随机推荐
- OpenCV中 常用 函数 的作用
1.CV_Assert函数作用: CV_Assert()若括号中的表达式值为false,则返回一个错误信息.
- 一文搞清到底什么是 .NET?
现在各种 .NET 满天飞,别说新手了,连我这样的老手都差点被绕进去.到底什么是 .NET 呢?通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 这篇文章好长呀 ...
- include和require的区别
include与require除了在处理引入文件的方式不同外,最大的区别就是:include在引入不存文件时产生一个警告且脚本还会继续执行,require则会导致一个致命性错误且脚本停止执行. inc ...
- Disconnected from the target VM, address: '127.0.0.1:57178', transport: 'socket'
idea 执行测试单元debug时控制台出现:Disconnected from the target VM, address: '127.0.0.1:57178', transport: 'sock ...
- Spring MVC 注解之controller层
第一层注解:@Controller 和 @RestController. 这两个注解的作用是:处理页面的HTTP请求,不同点 @RestController相当于@Controller +@Respo ...
- idea使用
一.IDEA 的下载及安装 打开IDEA的官网,如:http://www.jetbrains.com/ 然后到了主界面,点击下载如图: 图1 我们这里下载zip的,将它下载到你要保存的目录下,其次 ...
- 37_redux_理解
1.什么是Redux Redux是JavaScript状态容器(是JS库,不是react插件),提供可预测化的状态管理. 可以用在react.angular.vue等项目中,但基本与react配合使用 ...
- 项目管理第一篇(PROJECT MANAGEMENT A Systems Approach to Planning, Scheduling, and Controlling)
请把梦想和野心带上,这是我哥对我说的. 几年下来,人浑浑噩噩,梦想和野心像锋利的石头在水中慢慢被磨平,今天就再次记住,不要让焦虑和失望伴随着人生和家庭. 这是H A R O L D K E R Z N ...
- HTML的基础样式之CSS
一.初始CSS 1.1.介绍CSS 1.CSS定义如何显示HTML元素. 2.当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染). 1.2.CSS语法 每个CSS样式由两个组成部分 ...
- css第二天
二丶 1.字体属性font: 字体名称(font-family)字体大小(font-size):pc中通常,字体大小表示为12px,14px.移动设备中通常表示为0.57rem.字体粗细(font-w ...