#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

相关文章
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
121 0
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
前端开发
react antd点击table行时加选中背景色
react antd点击table行时加选中背景色
86 5
|
3月前
|
前端开发 JavaScript 数据库
在 React 项目中 Editable Table 的实现
由于我们是把 state 存放在父组件的,每次请求会造成 table 进行 render 一遍,如果再加入 loading 等状态,render 次数会更多。Table 组件默认情况下没有对 rerender 行为做优化,父组件更新,如果 columns 中的提供了自定义 render 方法, 对应的每个 Cell 都会重新 render 。 针对这种情况我们就需要进行优化,根据 shouldCellUpdate 来自定义渲染时机。 那么每个 Cell 的渲染时机应该是: 1. FormItem 增删位置变动时 2. 该 Cell 消费的对应 tableOptions 变动时 第一种情况很好判
55 1
|
6月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
189 0
|
11月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
72 0
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
104 0
|
前端开发
#私藏项目实操分享# 【React工作记录十三】关于ant design table组件里面文字溢出
#私藏项目实操分享# 【React工作记录十三】关于ant design table组件里面文字溢出
173 0
#私藏项目实操分享# 【React工作记录十三】关于ant design table组件里面文字溢出
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
361 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
77 0