鸿蒙界面开发（八）：Grid网格布局&Badge角标组件

实现效果

代码实现

import { Space, Table } from 'antd';
import React, { useRef } from 'react';

const CheckList = () => {
  const data = [
    {
      id: 1,
      name: '张三',
      age: 18,
      content: [
        {
          id: '1-1',
          text: '我叫张三',
        },
      ],
    },
    {
      id: 2,
      name: '李四',
      age: 20,
      content: [
        {
          id: '2-1',
          text: '我叫李四',
        },
      ],
    },
  ];
  const expandedRowRender = (record) => {
    const columns = [{ title: '自我介绍', dataIndex: 'text', key: 'text' }];
    return <Table columns={columns} dataSource={record.content} pagination={false} bordered />;
  };
  const handle = (type, row) => {
    if (type === '编辑') {
      console.log(row);
    } else {
      console.log(row);
    }
  };
  return (
    <>
      <Table
        dataSource={data}
        rowKey={(record) => record.id}
        expandedRowRender={(record) => expandedRowRender(record)}
        columns={[
          { dataIndex: 'name', title: '名称', width: 200, key: 'name' },
          { dataIndex: 'age', title: '年龄', width: 200, key: 'age' },
          {
            title: '操作',
            key: 'operation',
            align: 'center',
            render: (text, row) => (
              <Space size="middle">
                <a
                  onClick={() => {
                    handle('编辑', row);
                  }}
                >
                  编辑
                </a>
                <a
                  onClick={() => {
                    handle('删除', row);
                  }}
                >
                  删除
                </a>
              </Space>
            ),
          },
        ]}
        size="small"
        style={{ width: '600px' }}
      />
    </>
  );
};

export default CheckList;

注：本人前端小白 ，如有不对的地方还请多多指教