antd Tree 树形控件怎么修改item结构 ant design树形表格

转载

attitude 2024-03-15 05:50:39

文章标签 数据 ci 自定义 文章分类 机器学习人工智能

table表格支持这种树形可展开的形式,只需要在tableData中有children数据

antd Tree 树形控件怎么修改item结构 ant design树形表格_数据

不过这种用法是一开始获取表格数据时,就把children数据拿到了

实际场景中可能需要点击展开按钮时再去调取children数据

可以有两种方法实现这个需求

第一种: 通过expandable的onExpand方法,点击展开时获取数据,再通过筛选过滤,将数据添加到父级数据的children中

这里使用的是protable,antd table组件用法也是一样的.不过因为是通过改变tableData的数据,所以不要用request的方法赋值tableData

数据要求: 父级数据中需要一个字段表示当前的层级, 如果不是顶层数据,还要有一个字段表示父级id,方便添加数据时匹配

这里层级最多三级, 直接写了,如果不确定有几层的,需要写递归

import React, { useState, useEffect } from 'react';
import ProTable from '@ant-design/pro-table';
import { getCityList, getAreaList, getProvinces } from '@/services/citylist';
import { isEmpty } from 'lodash';

const TreeTable: React.FC = () => {
  const [tableData2, setTableData2] = useState<any[]>([]);

  const colums: any[] = [
    {
      title: '省份',
      dataIndex: 'province',
      width: '20%',
      render: (val: string, recored: any) => {
        if (recored.city) return '-';
        return val;
      },
    },
    {
      title: '市区',
      dataIndex: 'city',
      width: '20%',
      render: (val: string, recored: any) => {
        if (recored.area) return '-';
        return val;
      },
    },
    {
      title: '区县',
      width: '20%',
      dataIndex: 'area',
    },
    {
      title: 'GDP(亿)',
      width: '19%',
      dataIndex: 'gdp',
      valueType: 'digit',
    },
    {
      title: '排名',
      width: '18%',
      dataIndex: 'rank',
    },
  ];

  // 获取树形数据
  const getData2 = async () => {
    const res: any = await getProvinces();

    setTableData2(res);
  };

  useEffect(() => {
    getData2();
  }, []);

  // 点击展开
  const areaExpandedRowsChange = async (expanded: boolean, record: any) => {
    console.log(expanded, record);
    // 做一下限制,如果已经有数据,不再重复请求数据
    if (expanded && record.children && isEmpty(record.children)) {
      if (record.level === 1) { // 获取第一级数据的children
        const res = await getCityList(record.province, 1);
        setTableData2(
          tableData2.map((item: any) => {
            if (item.id === record.id) {
              return {
                ...item,
                children: res,
              };
            }
            return item;
          }),
        );
      } else if (record.level === 2) { // 获取第二级数据的children
        const res = await getAreaList(record);
        setTableData2(
          tableData2.map((item: any) => {
            const obj = {
              ...item,
            };
            if (item.id === record.parentId) {
              item.children.forEach((ss: any) => {
                if (ss.id === record.id) {
                  ss.children = res;
                }
              });
            }
            return obj;
          }),
        );
      }
    }
  };

  return (
    <ProTable
      bordered
      columns={colums}
      rowKey="id"
      search={false}
      dataSource={tableData2}
      expandable={{
        onExpand: areaExpandedRowsChange,
      }}
      pagination={false}
      toolBarRender={false}
    />
  )
}
export default TreeTable;

这种方法在添加数据时,麻烦一点,但是展示和交互比较友好.适合层级确定,并且层级数比较少的情况

antd Tree 树形控件怎么修改item结构 ant design树形表格_ci_02

第二种方法: 通过expandable的expandedRowRender属性,返回自定义内容

这种可以方便的定义要展示的children数据,因为返回的是DOM,

这种层级可以嵌套,但是有几层数据必须确定

import React, { useState, useEffect } from 'react';
import ProTable from '@ant-design/pro-table';
import { getCityList, getAreaList, getProvinces } from '@/services/citylist';
import { isEmpty } from 'lodash';

const TreeTable: React.FC = () => {
  const [tableData2, setTableData2] = useState<any[]>([]);

  const colums: any[] = [
    {
      title: '省份',
      dataIndex: 'province',
      width: '20%',
      render: (val: string, recored: any) => {
        if (recored.city) return '-';
        return val;
      },
    },
    {
      title: '市区',
      dataIndex: 'city',
      width: '20%',
      render: (val: string, recored: any) => {
        if (recored.area) return '-';
        return val;
      },
    },
    {
      title: '区县',
      width: '20%',
      dataIndex: 'area',
    },
    {
      title: 'GDP(亿)',
      width: '19%',
      dataIndex: 'gdp',
      valueType: 'digit',
    },
    {
      title: '排名',
      width: '18%',
      dataIndex: 'rank',
    },
  ];

  const colums2 = [
    {
      title: '',
      dataIndex: 'gdp',
      width: 45,
      render: () => '',
    },
    ...colums,
  ];

  // 获取表格数据
  const getData = () => {
    setTableData([
      {
        id: 1,
        province: '广东省',
        city: '',
        area: '',
        gdp: 7999,
      },
      {
        id: 2,
        province: '浙江省',
        city: '',
        area: '',
        gdp: 6990,
      },
      {
        id: 3,
        province: '江苏省',
        city: '',
        area: '',
        gdp: 5990,
      },
      {
        id: 4,
        province: '北京市',
        city: '',
        area: '',
        gdp: 8990,
      },
      {
        id: 5,
        province: '上海市',
        city: '',
        area: '',
        gdp: 8999,
      },
    ]);
  };

  useEffect(() => {
    getData();
  }, []);

  // 市渲染
  const provinceRender = (record: any) => {
    // 如果表格数据没变化,不会重新调接口,这里不需要再判断是否有值
    // 获取城市数据
    const getCitys = async () => {
      const res = await getCityList(record.province);
      return {
        data: res,
      };
    };

    // 区渲染
    const cityRender = (row: any) => {
      // 获取区数据
      const getAreas = async () => {
        const res = await getAreaList(row);
        return {
          data: res,
        };
      };

      return (
        <ProTable
          bordered
          columns={colums2}
          rowKey="id"
          search={false}
          request={getAreas}
          pagination={false}
          toolBarRender={false}
          showHeader={false}
        />
      );
    };

    return ( // 渲染的数据可以自定义
      <ProTable
        bordered
        columns={colums}
        rowKey="id"
        search={false}
        request={getCitys}
        expandable={{
          expandedRowRender: cityRender,
          // expandedRowKeys: cityRowKeys,
          // onExpandedRowsChange: cityExpandedRowsChange
        }}
        pagination={false}
        toolBarRender={false}
        showHeader={false}
      />
    );
  };

  return (
    <ProTable
      bordered
      columns={colums}
      rowKey="id"
      search={false}
      dataSource={tableData}
      expandable={{
        expandedRowRender: provinceRender,
        // expandedRowKeys: provinceRowKeys, // 如果需要筛选, 每次调用接口时将展开项收起,需要将expandedRowKeys属性设为可控,
        // onExpandedRowsChange: provinceExpandedRowsChange
      }}
      pagination={false}
      toolBarRender={false}
    />
  )
}
export default TreeTable;

这种方法不需要处理原始表格数据, 缺点是交互样式差一点, 展开按钮都在最左侧, 不能通过是否有下一级来区别展示展开图标

antd Tree 树形控件怎么修改item结构 ant design树形表格_ci_03