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

Posted 2023-03-16

 

目录

​​前言​​

​​导语​​

​​代码部分​​

​​第一步​​

​​第二步​​

​​总结​​

​​运行结果​​

---

前言

我是歌谣 我有个兄弟 巅峰的时候排名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为两个数组

运行结果

编辑

#yyds干货盘点 React工作记录二十一ant design封装一个弹框组件

 

目录

​​前言​​

​​导语​​

​​代码部分​​

​​引入组件​​

​​运行结果​​

​​总结​​

---

前言

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

导语

歌谣 歌谣 试着封装一个弹框的组件

​编辑

代码部分

//取消机构和取消讲师的方法封装
//params visible控制弹框的一个现实和隐藏
//params content文本内容
import React from react;
import 
    Modal,
   Icon,
   Button 
   from antd;

class CancelModel extends React.Component 
    stata = 
        
    

    //控制确定调用的函数
    handleOk=() => 
        this.props.handleOk&&this.props.handleOk();
    
     //控制弹窗的一个关闭
     handleCancel=() => 
        this.props.handleCancel&&this.props.handleCancel();
    
    //控制页面跳转的参数
    handleSkip=() => 
        // this.props.handleSkip&&this.props.handleSkip();
     
    render() 
        const cancleVisible,content=this.props
      
        return (<div>
        <Modal
          title="提示"
          visible=cancleVisible
          onOk=this.handleOk
          onCancel=this.handleCancel
          style=textAlign:center
        >
            <Icon type="exclamation-circle" />
            <p>content||</p>
            /* <Button type="link" block onClick=this.handleSkip>
            点击跳转
            </Button> */
        
        </Modal>
        </div>)
    


export default CancelModel

引入组件

import CancelModel from ../common/ComponentsList/cancleModel

<CancelModel content=content  handleOk=this.
handleLectureOk cancleVisible=cancleVisible 
handleCancel=this.handleLectureCancle />

运行结果

编辑

总结

content代表文件中的内容 根据取消和确定中的方法进行子传父的调用 确定和取消会触发的回调