ttk-app-core/src/apps/app-demo/tree/default-tree/app.js

@ttk/recat enterprise develop framework

// app.js
import React, {useState, useEffect} from 'react'
import Box from '@/components/floatbox';
import {Tree, Card} from '@ttk/component'
const {Fragment} = React
export default React.memo(Page)
function Page(props) {

  const [expandedKeys, setExpandedKeys] = useState(['0-0-0', '0-0-1']); // 展开节点
  const [checkedKeys, setCheckedKeys] = useState(['0-0-0']); // 选中节点
  const [selectedKeys, setSelectedKeys] = useState([]); // 点选节点
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const onExpand = expandedKeys => {
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(false);
  };

  // 选中节点
  const onCheck = checkedKeys => {
    console.log('onCheck', checkedKeys);
    setCheckedKeys(checkedKeys);
  };

  // 点击节点
  const onSelect = (selectedKeys, info) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeys);
  };

  const treeData = [
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        {
          title: 'parent 1-0',
          key: '0-0-0',
          children: [
            {
              title: 'leaf',
              key: '0-0-0-0',
            },
            {
              title: 'leaf',
              key: '0-0-0-1',
            },
          ],
        },
        {
          title: 'parent 1-1',
          key: '0-0-1',
          children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
        },
      ],
    },
  ];

  const treeData2 = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          children: [
            { title: '0-0-0-0', key: '0-0-0-0' },
            { title: '0-0-0-1', key: '0-0-0-1' },
            { title: '0-0-0-2', key: '0-0-0-2' },
          ],
        },
        {
          title: '0-0-1',
          key: '0-0-1',
          children: [
            { title: '0-0-1-0', key: '0-0-1-0' },
            { title: '0-0-1-1', key: '0-0-1-1' },
            { title: '0-0-1-2', key: '0-0-1-2' },
          ],
        },
        {
          title: '0-0-2',
          key: '0-0-2',
        },
      ],
    },
    {
      title: '0-1',
      key: '0-1',
      children: [
        { title: '0-1-0-0', key: '0-1-0-0' },
        { title: '0-1-0-1', key: '0-1-0-1' },
        { title: '0-1-0-2', key: '0-1-0-2' },
      ],
    },
    {
      title: '0-2',
      key: '0-2',
    },
  ];



  return (
    <Fragment>
      <Box className="box-aside" width="50%" height="100%">
        <Card
          title="基本用法"
          style={{height: "100%"}}
          className="ttk-card-form"
        >
          <Tree
            defaultExpandedKeys={['0-0-0', '0-0-1']}
            defaultSelectedKeys={['0-0-0', '0-0-1']}
            treeData={treeData}
          />
        </Card>
      </Box>
      <Box className="box-content" width="50%" height="100%">
      <Card
        title="受控操作"
        style={{height: "100%"}}
        className="ttk-card-form"
      >
        <Tree
          checkable
          onExpand={onExpand}
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          onSelect={onSelect}
          selectedKeys={selectedKeys}
          treeData={treeData}
        />
      </Card>
      </Box>
    
    </Fragment>
  )
}