kingdee / kdesign

An enterprise-class React UI components library
https://react.kingdee.design/
Apache License 2.0
107 stars 45 forks source link

[tree] 多选节点全选时禁用状态显示异常 #876

Closed kobehhh closed 2 months ago

kobehhh commented 2 months ago

重现链接或代码

import React from 'react'
import ReactDOM from 'react-dom'
import { Tree } from '@kdcloudjs/kdesign'

const Demo = () => {
  const [expandedKeys, setExpandedKeys] = React.useState(['0-1', '0', '1'])
  const [checkedKeys, setCheckedKeys] = React.useState(['1-1'])
  const [selectedKeys, setSelectedKeys] = React.useState(['1-1'])
  const data = [
    {
      key: '0',
      title: '0',
      checkable: false,
      selectable: false,
      children: [
        {
          key: '0-0',
          title: '0-0',
          selectable: false,
          children: []
        },
        {
          key: '0-1',
          title: '0-1',
          children: []
        }
      ]
    },
    {
      key: '1',
      title: '1',
      disabled: true,
      children: [
        {
          key: '1-0',
          title: '1-0',
          children: []
        },
        {
          key: '1-1',
          title: '1-1',
          children: [
            {
              key: '1-1-0',
              title: '1-1-0',
              children: [
                {
                  key: '1-1-0-0',
                  title: '1-1-0-0',
                  children: []
                }
              ]
            },
            {
              key: '1-1-1',
              title: '1-1-1',
              children: [
                {
                  key: '1-1-1-0',
                  title: '1-1-1-0',
                  children: []
                }
              ]
            }
          ]
        },
        {
          key: '1-2',
          title: '1-2',
          children: []
        }
      ]
    },
    {
      key: '2',
      title: '2',
      children: []
    },
    {
      key: '3',
      title: '3',
      children: []
    }
  ]

  const onSelect = (selectedKeys, info) => {
    setSelectedKeys(selectedKeys)
    console.log('onSelect', selectedKeys)
  }

  const onCheck = (checkedKeys, info) => {
    console.log('checkedKeys', checkedKeys)
    setCheckedKeys(checkedKeys)
  }

  const onExpand = (expandedKeys, info) => {
    console.log('onExpand', expandedKeys)
    setExpandedKeys(expandedKeys)
  }

  return (
    <div
      style={{
        width: '300px',
        height: '300px'
      }}>
      <Tree
        treeData={data}
        expandedKeys={expandedKeys}
        checkedKeys={checkedKeys}
        selectedKeys={selectedKeys}
        onCheck={onCheck}
        onExpand={onExpand}
        onSelect={onSelect}
        virtual={false}
        checkable={true}
      />
    </div>
  )
}

ReactDOM.render(<Demo />, mountNode)

重现问题步骤

多选节点全选时禁用状态显示全选样式

期望的结果是什么

多选节点全选时禁用状态应不显示全选状态 保证禁用状态不跟子节点的选中关联

实际的结果是什么

组件库版本号、浏览器信息

组件库与浏览器均为最新版本