Ant design Table进行树形数据递归联动

最新推荐文章于 2024-08-03 12:31:25 发布

置顶

人菜又瘾大

最新推荐文章于 2024-08-03 12:31:25 发布

阅读量1.9k

点赞数

分类专栏：笔记文章标签： react

本文链接：https://blog.csdn.net/edg_zj/article/details/105972635

版权

本文介绍如何在Ant Design的Table组件中自定义实现树形数据的递归联动功能，通过阅读官方文档并编写代码来解决这一需求。

摘要由CSDN通过智能技术生成

看了ant design的官方文档API，发现没有对于树形数据联动的函数。自己简单写了一个。代码如下

父元素key是1,2,3,4来命名
子元素key是用1_1,1_2,来命名
const rowSelection = {
    type: 'checkbox',
    selectedRowkeys,  //储存选中项的key
    onSelect: this.selectChild, //对应行被选中(取消选中)触发函数
}


// 对应行被选中(取消选中)触发函数
// record代表选中/取消选中行对应数据.
// selected是否选中，选中true，取消false。
// selectedRows存着当前所有被选中的元素.

selectChild = (record,selected,selectedRows) => {
    const selectKey = []
    const { dataSource } = this.state
    // selectKey存储所有被选中的元素
    selectedRows.forEach(data => {
        selectKey.push(data.key)
    })
    // 取消选中是子元素,那么对应父元素相应取消选中
    if (record.key.length === 3 && !selected && selectKey.indexOf(record.key[0]) !== -1)         
    {
        selectKey.splice(selectKey.indexOf(record.key[0],1)
    } 
    // 确认选中是子元素
    else if (record.key.length === 3 && selected) {
        查找子元