Antd组件Table树型多选全选问题
组件库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树型多选全选问题的更多相关文章
- MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...
- Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色
上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...
- 基于JQ的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- Android 实现自己定义多级树控件和全选与反选的效果
博文開始之前,首先要感谢大牛:(lmj623565791),本博文是在其博文http://blog.csdn.net/lmj623565791/article/details/40212367基础上进 ...
- UITableView多选全选
自定义cell和取到相应的cell就行了 TableViewCell.h #import <UIKit/UIKit.h> @interface TableViewCell : UITabl ...
- Jquery 多选全选/取消 选项卡切换 获取选中的值
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue-element 动态单选多选全选
实现效果如图 数据格式如下: pps: [{"code":"6","createTime":"2018-09-07 00:00:0 ...
- checkout 多选 全选(亲测有效)
<input type="button" id="btn1" value="全选"> <input type=" ...
- js分类多选全选
效果如图: HTML代码: <div class="form-group quanxian-wrap"> <label>项目</label> & ...
随机推荐
- 【python】PyQt5 QAction 添加点击事件
def test(): #your function ui.yourQActionName.triggered.connect(lambda:test()) #添加lambda: 就不报错了
- The Expressive Power of Neural Networks: A View from the Width
目录 概 主要内容 定理1 定理2 定理3 定理4 定理1的证明 Lu Z, Pu H, Wang F, et al. The expressive power of neural networks: ...
- Mysql数据库服务端的安装
一般提到Mysql数据库的安装在工作当中是说的安装数据库管理软件的服务端,服务端的安装可以安装在Windows环境,也可以安装在Linux环境. Windows环境安装:目前安装比较流行的是5.7,增 ...
- MySQL8.0的下载与安装
下载 进入官网的下载页面 点击下图中的链接 可以选择上边的 Community Server ,那样会下载压缩包,这里我选择下边的 Installer for Windows ,下载的是安装包 点击下 ...
- jsoncpp转换字符串
Json::Value root; ...//root中写入数据 //方法一:转为格式化字符串,里面加了很多空格及换行符 string strJson1 = root.toStyledString() ...
- Linux_Vmtools的重安装与设置共享文件夹
前置准备 已经安装了Linux的Vm虚拟机 2. 虚拟机上已经安装gcc 重装Vmtools Part1 用root账号登录Linux 弹出原来cd Vm菜单栏 - 虚拟机(M) - 重新安装VmWa ...
- linux脚本重启java服务
!/bin/bashpid=$(ps -ef | grep zwdatatransfer-1.0.0.jar | grep -v 'grep' | awk '{print $2}')kill -9 $ ...
- java知识点链接
业务复杂=if else?刚来的大神竟然用策略+工厂彻底干掉了他们! 细思极恐-你真的会写java吗? [解锁新姿势] 兄dei,你代码需要优化了 消灭 Java 代码的"坏味道" ...
- DES对称加密算法实现:Java,C#,Golang,Python
数据加密标准(DES,Data Encryption Standard,简写DES)是一种采用块密码加密的对称密钥算法,加密分组长度为64位,其中8.16.24.32.40.48.56.64 等8位是 ...
- 初识python 之 爬虫:爬取某电影网站信息
注:此代码仅用于个人爱好学习使用,不涉及任何商业行为! 话不多说,直接上代码: 1 #!/user/bin env python 2 # author:Simple-Sir 3 # time:201 ...