组件库antd里面的树型选择不能做到勾选父组件然后一起勾选子组件情况,我也不知道是组件库的问题还是原本设计就是这样

刚好组件库存在rowselection的配置项,既然存在拓展方法,又遇到需求,那么就对数据进行处理了

以下方法临时起意编写,可能有些地方没有考虑的很完善,也可以有些代码冗杂,不过方法是可以正常使用的,由于用到了递归,对于数据规模大的话来说可能就没那么快

由于是在封装a-table的基础上进行修改,基本功能和a-table是一样的

首先对于勾选的选中和取消,这里耗费的事件会比较多,现在的方法还算是完善的,就是长得不好看

onSelect(record, selected, selectedRows) { // selected 判断是否勾选
if (selected) {  // 添加当前节点和子节点,使其勾选
this.selectedRowKeys.push(record.id)  // 添加当前点击的节点
this.selectedRows.push(record.value)  // 添加当前点击的节点的数据
if (!Com.isEmpty(record.children)) {  // 这里的isEmpty方法是判断是否为空,当然也可以判断他的长度==0
record.children.forEach(item => {
if (item.children) { // 如果存在子节点,进行递归
this.onSelect(item, true)
}
this.selectedRows = [...this.selectedRows, item.value]
this.selectedRowKeys.push(item.id)
})
// 去重
this.selectedRows = [...new Set(this.selectedRows)]
this.selectedRowKeys = [...new Set(this.selectedRowKeys)]
}
} else {  // 取消勾选,清空当前节点和子节点
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1);
this.selectedRows.splice(this.selectedRows.indexOf(record.id), 1)
if (!Com.isEmpty(record.children)) {
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1);
this.selectedRows.splice(this.selectedRows.indexOf(record.id), 1)
record.children.forEach(item => {
if (item.children) {
this.onSelect(item, false)
}
let index = this.selectedRowKeys.indexOf(item.id)
this.selectedRows.splice(index, 1)
this.selectedRowKeys.splice(index, 1)
})
}
return false
}
},

对于上面的勾选与取消,会导致一个问题,就是全选按钮也不能实现全部取消或者全部勾选,于是乎全选事件也得重新写,全选事件其实还好,就是遍历完然后将key和数据添加到两个数据里面去而已

// 全选操作---自定义选中操作导致全选操作失效,从而有这个方法
onSelectAll(selected, selectedRows, changeRows) {
if (selected) {
let rows = []
let arr = []
selectedRows.forEach(item => {
arr.push(item.id)
rows.push(item.value)
})
this.selectedRows = rows
this.selectedRowKeys = arr
} else {
this.selectedRows = []
this.selectedRowKeys = []
}
}

最后还有一个默认展开整棵table树的方法也是递归

使用的是这里的属性赋值

fnChildren(data) { // 这里的data是table的树数据
data.forEach((val, index, arr) => {
this.expandedKeys.push(val.id)
if (!Com.isEmpty(val.children)) { // 判断是否为空 也就是判断还是否存在子节点
val.children = this.fnChildren(val.children)
}
})
return data
},

有想法或者建议可以留言

Antd组件Table树型多选全选问题的更多相关文章

  1. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  2. Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  3. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. Android 实现自己定义多级树控件和全选与反选的效果

    博文開始之前,首先要感谢大牛:(lmj623565791),本博文是在其博文http://blog.csdn.net/lmj623565791/article/details/40212367基础上进 ...

  5. UITableView多选全选

    自定义cell和取到相应的cell就行了 TableViewCell.h #import <UIKit/UIKit.h> @interface TableViewCell : UITabl ...

  6. Jquery 多选全选/取消 选项卡切换 获取选中的值

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. vue-element 动态单选多选全选

    实现效果如图 数据格式如下: pps: [{"code":"6","createTime":"2018-09-07 00:00:0 ...

  8. checkout 多选 全选(亲测有效)

    <input type="button" id="btn1" value="全选"> <input type=" ...

  9. js分类多选全选

    效果如图: HTML代码: <div class="form-group quanxian-wrap"> <label>项目</label> & ...

随机推荐

  1. CNN、RNN

    卷积神经网络有三个结构上的特性:局部连接,权重共享以及空间或时间上的次采样.这些特性使得卷积神经网络具有一定程度上的平移.缩放和扭曲不变性. CNN由可学习权重和偏置的神经元组成.每个神经元接收多个输 ...

  2. FAT

    目录 概 主要内容 代码 Zhang J., Xu X., Han B., Niu G., Cui L., Sugiyama M., Kankanhalli M. Attacks which do n ...

  3. DFT, DHT, DCT, DST

    目录 基本 酉变换 others Fourier-related Transforms DFT DHT DCT 与DFT的联系 DST 与DFT的联系 Gonzalez R. C. and Woods ...

  4. ☕【难点攻克技术系列】「海量数据计算系列」如何使用BitMap在海量数据中对相应的进行去重、查找和排序

    BitMap(位图)的介绍 BitMap从字面的意思,很多人认为是位图,其实准确的来说,翻译成基于位的映射,其中数据库中有一种索引就叫做位图索引. 在具有性能优化的数据结构中,大家使用最多的就是has ...

  5. 生成对抗网络GAN与DCGAN的理解

    作者在进行GAN学习中遇到的问题汇总到下方,并进行解读讲解,下面提到的题目是李宏毅老师机器学习课程的作业6(GAN) 一.GAN 网络上有关GAN和DCGAN的讲解已经很多,在这里不再加以赘述,放几个 ...

  6. Java初学者作业——编写Java程序,输入一个学生的5门课程的成绩,求其平均分。

    返回本章节 返回作业目录 需求说明: 编写Java程序,输入一个学生的5门课程的成绩,求其平均分.计算平均成绩,需要将每一门课程的成绩逐步累加到总成绩中,使用 for 循环实现,然后求出平均分. 实现 ...

  7. WinForm应用程序的开机自启、记住密码,自动登录的实现

    一.思路: 1.开机自启,自然是需要用到注册表,我们需要把程序添加到电脑的注册表中去 2.记住密码,自动登录,开机自启,在页面的呈现我们都使用复选框按钮来呈现 3.数据持久化,不能是数据库,可以是sq ...

  8. Kafka基础教程(四):.net core集成使用Kafka消息队列

    .net core使用Kafka可以像上一篇介绍的封装那样使用(Kafka基础教程(三):C#使用Kafka消息队列),但是我还是觉得再做一层封装比较好,同时还能使用它做一个日志收集的功能. 因为代码 ...

  9. AI系统——梯度累积算法

    明天博士论文要答辩了,只有一张12G二手卡,今晚通宵要搞定10个模型实验 挖槽,突然想出一个T9开天霹雳模型,加载不进去我那张12G的二手卡,感觉要错过今年上台Best Paper领奖   上面出现的 ...

  10. C++高并发场景下读多写少的解决方案

    C++高并发场景下读多写少的解决方案 概述 一谈到高并发的解决方案,往往能想到模块水平拆分.数据库读写分离.分库分表,加缓存.加mq等,这些都是从系统架构上解决.单模块作为系统的组成单元,其性能好坏也 ...