vue复选框组件自定义对勾_vue+element:树级复选框组件使用
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:树级复选框组件使用相关推荐
- vue复选框组件自定义对勾_vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解...
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
- vue 文件及描述信息一起上传_vue+element 实现选取文件,提交上传全部表单信息(同步)...
代码如下: class="upload-demo" ref="upload" :headers="headers" :action=&quo ...
- java 复选框 背景色_将多选框选中时打勾的颜色
body { font-size:12px; } .checkbox { width:12px; height:12px; background-image:url(http://ucren.com/ ...
- Keil软件勾选框(复选框)不显示勾号,而是填充实心黑色,导致软件不能用。
Keil软件勾选框(复选框)不显示勾号,而是填充实心黑色,导致软件不能用. 问题描述 解决办法 问题描述 1. Keil软件勾选框(复选框)不显示勾号,而是填充实心黑色 2.串口助手勾选框(复选框)不 ...
- Vue自定义组件——自定义下拉框
组件自定义 props props传入数据. $emit this.$emit("input",param);调用组件外部的监听. v-model 自定义组件要使用v-model实 ...
- Vue3 - Element plus 实现 “带分页“ 表格组件,实现跨页进行 “分页勾选“ 的多选功能(解决分页表格组件 <el-table> 跨页后已前勾选的行自动消失问题)详细示例解决教程
前言 在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...
- Ztree树的复选框和获取选择的节点实例和代码
0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree ...
- 文本框底部套入勾选html,2017年3月全国二级MS OFFICE真题第2套
小许正在撰写一篇有关质量管理的论文,按照如下要求帮助小许对论文进行编辑排版. 1.在考生文件夹下,将"Word素材.docx"件另存为"Word.docx"(& ...
- vant组件搜索并选择_Vue.js自定义弹层组件|vue仿微信/ios弹窗
最近趁着国庆假期给自己充充电,一直在捣鼓Nuxt.js项目,由于项目中需要用到定制化弹窗功能,本来是想着使用Vant组件库,经过再三考虑,最后决定还是自己重新造一个,于是就有了Vue自定义弹出层VPo ...
最新文章
- iPhone How-to:如何调整UIView的Z-Order
- 理论与实践中的CNN模型结构,如何引领深度学习热潮
- Cocoapods 第三方类库管理工具
- 【译】Tutorials ---- Hello, World
- asyn4j -- java 异步方法调用框架
- java 备份 mysql 日志_MySQL 数据备份与还原
- 未检测到ca设备或ca驱动异常_安川伺服驱动器SGDV报警原因及处理措施
- 常用的MySQL命令大全(完整版、太到位了)
- 5万成员丨CSDN 大数据领域网红社区!
- kali linux怎么入侵手机,Kali Linux-Metasploit入侵Android手机
- 能上QQ不能上网的解决方法
- 优秀孩子的父母都有这五个特点
- Matlab设计简易计算器
- AndroidStudio配置文件目录
- 俄勒冈健康与科学大学计算机,俄勒冈健康与科学大学有何优势
- 18章 资产收益率和风险
- halcon的长度和角度测量
- My 英语 and 思想 blog
- 1 求长方形的面积和周长
- 如何将镜像上传至阿里云?如何从阿里云中拉取自己的镜像?
热门文章
- Webpack 2 视频教程 002 - NodeJS 安装与配置
- css之absolute
- Xshell 基本使用方式 (1) -- 使用Xshell 连接 VMware下的linux系统
- express接受get数据
- 系统架构的演变 -----自 罗文浩
- Codeforces Round #277 (Div. 2) 题解
- Google C2Dm相关文章
- Java排序算快速排序_Java排序算法 [快速排序]
- php crypt mysql password_使用PHP 5.5的password_hash和password_verify函数
- 小米10pro使用说明书_华为Mate40、华为P40和小米10拍照对比:哪一款最好?