#yyds干货盘点 【React工作记录二十二】ant design实现嵌套table

简介: #yyds干货盘点 【React工作记录二十二】ant design实现嵌套table

导语

今天页面有了一个新的需求 需要封装一个嵌套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为两个数组


运行结果

image.png

相关文章
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
90 0
|
12天前
|
前端开发 JavaScript 数据库
在 React 项目中 Editable Table 的实现
由于我们是把 state 存放在父组件的,每次请求会造成 table 进行 render 一遍,如果再加入 loading 等状态,render 次数会更多。Table 组件默认情况下没有对 rerender 行为做优化,父组件更新,如果 columns 中的提供了自定义 render 方法, 对应的每个 Cell 都会重新 render 。 针对这种情况我们就需要进行优化,根据 shouldCellUpdate 来自定义渲染时机。 那么每个 Cell 的渲染时机应该是: 1. FormItem 增删位置变动时 2. 该 Cell 消费的对应 tableOptions 变动时 第一种情况很好判
22 1
|
3月前
|
前端开发
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
3月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
110 0
|
8月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
56 0
|
9月前
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
73 0
|
7天前
|
前端开发 JavaScript UED
React 基础与实践 | 青训营笔记
React 基础与实践 | 青训营笔记
12 0
|
1月前
|
前端开发 JavaScript Java
React 速通笔记
【7月更文挑战第17天】
28 1
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
60 0
|
前端开发
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之8
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之7
41 0