handleCheck(checkedKeys,checkedNodes,halfCheckedKeys,halfCheckedNodes){var len = 0,num = 0;var _alen = 0;var a =[];var b =[];var copyArr =[];for (var i = 0;i < checkedNodes.checkedNodes.length;i++){//记录子节点的索引

if (checkedNodes.checkedNodes[i].children === null) {

len++;

b.push(i)

}//判断是否有全选,如果有,则获取父节点信息的索引

if (checkedNodes.checkedNodes[i].children != null) {

num++;

a.push(i)

}

}

console.log('num')

console.log(checkedNodes.halfCheckedKeys)

console.log(num)

console.log('a')

console.log(a)//如果都是半选状态

if ( num === 0) {//将全是半选的模式设置为1

this.flag = 1

//将父节点信息和子节点信息加入到param数组中(这个数组与后台数据交互)

this.param =[]

let _pollutant={}this.pollutant.projectId = this.iddthis.pollutant.subCateId = checkedNodes.halfCheckedKeys[checkedNodes.checkedKeys.length-1]this.pollutant.cateId = checkedNodes.checkedKeys[checkedNodes.checkedKeys.length-1]

Object.assign(_pollutant,this.pollutant)this.param.push(_pollutant)

console.log('半选状态')

console.log(this.param)

}//如果都是全选状态

if (num > 0 && checkedNodes.halfCheckedKeys.length === 0) {//如果由半选进入全选状态,则将数组置空,然后将该父节点下的所有子节点放入数组中

if (this.flag === 1)this.param =[]//如果由混合进入全选状态,这时如果将这个父节点的所有子节点加入数组则会有重复数据,这时需要删除之前多加的数据

if (this.flag === 3) {this.param.splice(this.param.length-1,1)

}//获取最新父节点的索引以及该父节点的长度

_alen= a.length-1;var length =checkedNodes.checkedNodes[a[_alen]].children.length;

console.log(length)//最新父节点下的所有子节点放到数组

for (var j = 0;j

let _pollutant={}this.pollutant.projectId = this.iddthis.pollutant.subCateId =checkedNodes.checkedNodes[a[_alen]].idthis.pollutant.cateId =checkedNodes.checkedNodes[a[_alen]].children[j].id

Object.assign(_pollutant,this.pollutant)this.param.push(_pollutant)

}

console.log('全选状态')

console.log(this.param)//将当前全选状态设置为2

this.flag = 2;

}//如果是全选和半选都有

if (num > 0 && checkedNodes.halfCheckedKeys.length != 0) {

console.log(checkedNodes.checkedNodes)

console.log(checkedNodes.halfCheckedNodes)

_alen= a.length - 1console.log(a[_alen])//如果之前操作全是半选模式 或者是混合模式 ,则将全选的再加入数组

if (this.flag === 1 || this.flag === 3) {var length =checkedNodes.checkedNodes[a[_alen]].children.length;for (var j = 0;j

let _pollutant={}this.pollutant.projectId = this.iddthis.pollutant.subCateId =checkedNodes.checkedNodes[a[_alen]].idthis.pollutant.cateId =checkedNodes.checkedNodes[a[_alen]].children[j].id

Object.assign(_pollutant,this.pollutant)this.param.push(_pollutant)

}

}

console.log(this.flag)

console.log('flag')//将全选之后的节点放到数组中//如果之前操作全是全选,则将半选的再加入数组

if (this.flag === 2) {

console.log('CNlen')var CNlen = a[_alen] + checkedNodes.checkedNodes[a[_alen]].children.length +1console.log(CNlen)

console.log(checkedNodes.halfCheckedKeys.length)for (var i = CNlen;i < checkedNodes.checkedNodes.length; i++) {

let _pollutant={}this.pollutant.projectId = this.iddthis.pollutant.subCateId = checkedNodes.halfCheckedKeys[checkedNodes.halfCheckedKeys.length-1]this.pollutant.cateId =checkedNodes.checkedNodes[i].id

Object.assign(_pollutant,this.pollutant)this.param.push(_pollutant)

}

}

console.log('全选和半选')

console.log(this.param)this.flag = 3}

},

vue复选框组件自定义对勾_vue+element:树级复选框组件使用相关推荐

  1. vue复选框组件自定义对勾_vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解...

    最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...

  2. vue 文件及描述信息一起上传_vue+element 实现选取文件,提交上传全部表单信息(同步)...

    代码如下: class="upload-demo" ref="upload" :headers="headers" :action=&quo ...

  3. java 复选框 背景色_将多选框选中时打勾的颜色

    body { font-size:12px; } .checkbox { width:12px; height:12px; background-image:url(http://ucren.com/ ...

  4. Keil软件勾选框(复选框)不显示勾号,而是填充实心黑色,导致软件不能用。

    Keil软件勾选框(复选框)不显示勾号,而是填充实心黑色,导致软件不能用. 问题描述 解决办法 问题描述 1. Keil软件勾选框(复选框)不显示勾号,而是填充实心黑色 2.串口助手勾选框(复选框)不 ...

  5. Vue自定义组件——自定义下拉框

    组件自定义 props props传入数据. $emit this.$emit("input",param);调用组件外部的监听. v-model 自定义组件要使用v-model实 ...

  6. Vue3 - Element plus 实现 “带分页“ 表格组件,实现跨页进行 “分页勾选“ 的多选功能(解决分页表格组件 <el-table> 跨页后已前勾选的行自动消失问题)详细示例解决教程

    前言 在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...

  7. Ztree树的复选框和获取选择的节点实例和代码

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree ...

  8. 文本框底部套入勾选html,2017年3月全国二级MS OFFICE真题第2套

    小许正在撰写一篇有关质量管理的论文,按照如下要求帮助小许对论文进行编辑排版. 1.在考生文件夹下,将"Word素材.docx"件另存为"Word.docx"(& ...

  9. vant组件搜索并选择_Vue.js自定义弹层组件|vue仿微信/ios弹窗

    最近趁着国庆假期给自己充充电,一直在捣鼓Nuxt.js项目,由于项目中需要用到定制化弹窗功能,本来是想着使用Vant组件库,经过再三考虑,最后决定还是自己重新造一个,于是就有了Vue自定义弹出层VPo ...

最新文章

  1. iPhone How-to:如何调整UIView的Z-Order
  2. 理论与实践中的CNN模型结构,如何引领深度学习热潮
  3. Cocoapods 第三方类库管理工具
  4. 【译】Tutorials ---- Hello, World
  5. asyn4j -- java 异步方法调用框架
  6. java 备份 mysql 日志_MySQL 数据备份与还原
  7. 未检测到ca设备或ca驱动异常_安川伺服驱动器SGDV报警原因及处理措施
  8. 常用的MySQL命令大全(完整版、太到位了)
  9. 5万成员丨CSDN 大数据领域网红社区!
  10. kali linux怎么入侵手机,Kali Linux-Metasploit入侵Android手机
  11. 能上QQ不能上网的解决方法
  12. 优秀孩子的父母都有这五个特点
  13. Matlab设计简易计算器
  14. AndroidStudio配置文件目录
  15. 俄勒冈健康与科学大学计算机,俄勒冈健康与科学大学有何优势
  16. 18章 资产收益率和风险
  17. halcon的长度和角度测量
  18. My 英语 and 思想 blog
  19. 1 求长方形的面积和周长
  20. 如何将镜像上传至阿里云?如何从阿里云中拉取自己的镜像?

热门文章

  1. Webpack 2 视频教程 002 - NodeJS 安装与配置
  2. css之absolute
  3. Xshell 基本使用方式 (1) -- 使用Xshell 连接 VMware下的linux系统
  4. express接受get数据
  5. 系统架构的演变 -----自 罗文浩
  6. Codeforces Round #277 (Div. 2) 题解
  7. Google C2Dm相关文章
  8. Java排序算快速排序_Java排序算法 [快速排序]
  9. php crypt mysql password_使用PHP 5.5的password_hash和password_verify函数
  10. 小米10pro使用说明书_华为Mate40、华为P40和小米10拍照对比:哪一款最好?