antd动态tree 自定义样式

import React, { useEffect, useState } from 'react';
import { Tree } from 'antd';

import './index.less';

const { TreeNode } = Tree;
import { getSubAreaData } from "@services/area";



const SelectAreaTree = (props: any) => {
  const [treeData, setTreeData] = useState([]);

  useEffect(() => {
    getSubAreaData({ areaId: 0 }).then(response => {
      const data = response.data;
      const initTreeData = [];
      for (const dataKey in data) {
        initTreeData.push({
          title: data[dataKey].areaName,
          key: data[dataKey].areaId,
        })
      }
      setTreeData(initTreeData);
    });
  }, []);


  const onl oadData = treeNode => new Promise((resolve) => {
    if (treeNode.props.children) {
      resolve();
      return;
    }
    getSubAreaData({ areaId: treeNode.props.dataRef.key }).then(response => {
      const data = response.data;
      const subOrgArray = [];
      data.forEach(item => {
        subOrgArray.push({ title: item.areaName, key: item.areaId });
      });
      treeNode.props.dataRef.children = subOrgArray;
      setTreeData([...treeData]);
      resolve();
    });
  })

  const renderTreeNodes = data => data.map((item) => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key} dataRef={item}>
          {renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode {...item} dataRef={item} />;
  })

  // 节点选择触发事件
  const treeNodeSelect = (selectKey, e) => {
    if (!selectKey || selectKey.length <= 0) {
      return;
    }
    let checkedNodes = e.checkedNodes;
    for (const checkedNodesKey in checkedNodes) {
      console.log(checkedNodes[checkedNodesKey].props.dataRef);
    }
    console.log(selectKey,e.checkedNodes);
    // selectKey[0] + '', e.selectedNodes[0].props.dataRef.title
  }

  return (
    <div className="content-info">
      <div className="title-close">
        <div onLeftClick={() => {
          props.onShowOrClose()
        }}>关闭
        </div>
      </div>
     <div>
       <Tree checkable selectable={false} loadData={onLoadData} onCheck={treeNodeSelect}>
         {renderTreeNodes(treeData)}
       </Tree>
     </div>
    </div>
  );
};

export default SelectAreaTree;

.content-info{
  height: 80vh;
  padding: 0.2rem;
}
.title-close{
  display: flex;
  flex-direction:row-reverse;
}


//重写tree多选框位置

.ant-tree{
  max-height:70vh;
  overflow-y:  scroll;
}
.ant-tree li span.ant-tree-checkbox {
  float: right;
}


:root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_close .ant-tree-switcher-icon, :root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_close .ant-select-switcher-icon {
  font-size: 26px;
  color: #BFBFBF;
}
:root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_open .ant-tree-switcher-icon, :root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_open .ant-select-switcher-icon {
  font-size: 26px;
  color: #BFBFBF;
}

.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner, .ant-tree-checkbox:hover .ant-tree-checkbox-inner, .ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner {
  border-color: #e7bf97;
}
.ant-tree-checkbox-checked .ant-tree-checkbox-inner {
  background-color: #e7bf97;
  border-color: #e7bf97;
}

.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner::after {
  background-color: #e7bf97;
}

标签：checkbox,const,自定义,tree,ant,switcher,antd,data
来源： https://www.cnblogs.com/kkvt/p/15903614.html