zoukankan      html  css  js  c++  java
  • antd树型选择控件选择父级_【antd】Tree组件子节点不完全勾选获取父节点的值

    注意:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单

    我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去,如图:点击原子零件和零件加工的时候需要把产品服务的id给后台传过去

    屏幕快照 2019-08-05 下午5.46.40.png

    在实现之前,需要给大家画出来antd中标出来的相关属性(敲黑板!!)

    WeChatf1fc404c8dd393ff058a631d87246c67.pngonCheck勾选方法,其中第二个参数是个事件对象,什么意思捏?打印出来就说是如下:

    WeChat06b1c27746a78c88638e9b1461151d89.png

    e里面有很多方法和属性,其中包含了一个叫做halfCheckedKeys的数组,这个数组就是不完全勾选中tree的子节点的情况下的父节点,所以我们就这样在勾选的时候就获取到了父节点,然后通过拼接的形式传给后台就可以了~

    onCheck = (checkedKeys,e) => {
    console.log('checkedKeys', checkedKeys, "e",e,);

    //注意:halfCheckedKeys 是没有全部勾选状态下的父节点

    let concatTreeData = checkedKeys.concat(e.halfCheckedKeys)

    this.setState({
    checkedKeys: concatTreeData

    })

    }

    --------------------------------------------------------------技术分割线(高阶)---------------------------------------------------

    但是,(又敲黑板!!!)我们给后台传过去了父节点,如果有反显的情况下(如:修改,查看功能),一旦有父节点,子节点又将会全部勾选!!这种情况下又该怎么办呢?

    思路如下:

    1.循环遍历出最深层子节点,存放在一个数组中

    2.将每个不同页面(或者说是不同ID对应的页面)后台返回的含有父节点的数组和第一步骤遍历出来的只包含子节点的test数组做比较

    3.如果有相同值,将相同值取出来,push到一个新数组中

    4.利用这个新的重组的数组给Tree组件selected赋值

    let test = [] //test存放所有子节点的数组

    //第一步骤:子节点放在一个数组中

    componentDidMount() {
    //这个接口是请求所有的父子节点的接口

    get_menu_tree().then(res => {
    const { responseData } = res.data

    this.requestList(responseData) //将后台返回的所有父子节点的数组传给下面的方法

    })

    this.getRoleInfo() // 修改请求页面详情的时候调用

    }

    //这个方法是筛选出来所有的子节点,存放在test数组中

    requestList = (data)=> {
    data && data.map(item=>{
    if(item.nodes && item.nodes.length>0){
    requestList(item.nodes)

    }else{
    test.push(item.menuId)

    }

    return null

    })

    return test

    }

    //第2,3步骤的方法

    uniqueTree =(uniqueArr,Arr)=> {
    let uniqueChild = []

    for(var i in Arr){
    for(var k in uniqueArr){
    if(uniqueArr[k] === Arr[i]){
    uniqueChild.push(uniqueArr[k])

    }

    }

    }

    return uniqueChild

    }

    //调用第2,3步骤的方法

    getRoleInfo = () => {
    get_user_info({ id: Id }).then(res => {
    let data = res.data.responseData;

    let uniqueChild = this.uniqueTree(data.menuIds,test) //数组进行比对删选出来父节点

    this.setState({
    childNodes: uniqueChild

    })

    });

    };

    checkable = {checkable}

    onCheck={this.onCheck}

    checkedKeys={this.state.childNodes}

    >

    {this.renderList(treeData,treekey)}

    这就OK了~


    ————————————————
    版权声明:本文为CSDN博主「福运金刚」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_32259417/article/details/112834287

  • 相关阅读:
    61. 最长不含重复字符的子字符串
    60. 礼物的最大价值 (未理解)
    59. 把数字翻译成字符串
    58. 把数组排成最小的数
    57. 数字序列中某一位的数字 (不懂)
    spring data jpa 官方文档
    idea 编译报错 源发行版 1.8 需要目标发行版 1.8
    idea maven 依赖报错 invalid classes root
    solr
    spring boot 官方文档
  • 原文地址:https://www.cnblogs.com/webqiand/p/14713308.html
Copyright © 2011-2022 走看看