[JavaScript知识库]【React工作记录二十二】ant design实现嵌套table

目录

前言

导语

代码部分

第一步

第二步

总结

运行结果

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

今天页面有了一个新的需求 需要封装一个嵌套table组件

?

代码部分

第一步

  <BaseTable
          rowKey="code"
          pageIndex={pageIndex}
          pageSize={pageSize}
          total={boothTotal}
          columns={columns}
          dataSource={boothData}
          expandedRowRender={expandedRowRender}
          onTableChange={this.handleChange}
        />

第二步

 const expandedRowRender = (record) => {
      const columnsList = [
        {
          title: '规格',
          dataIndex: 'attrName',
        },
        {
          title: '规格编码',
          dataIndex: 'code',
        },
        {
          title: '价格',
          dataIndex: 'stockNum',
        },
        {
          title: '库存',
          dataIndex: 'stockNum',
        },
      ];
      return (
        <BaseTable
          rowKey="code"
          columns={columnsList}
          dataSource={record.skuList}
          pagination={false}
          rowSelection={{
            selectedRowKeys,
            onChange: this.onSelectChange,
            type: 'radio',
          }}
        />
      );
    };

总结

1要点解析 这是二次封装的table 具有table的属性

2数据格式满足外层的datasource为a 里层的datasource为b 且a b为两个数组

运行结果

?