标签：checkbox const 自定义 tree ant switcher antd data

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。