11-21 07:34 阅读 585

Antdesign_table 点击事件

1.table组件的引入后

    `     <Table
              rowKey={(record) => record.id}
              columns={columns}
              dataSource={reviewList}
              pagination={totalNum > 10 ? pagination : false}
            />
          </div>
    `    
复制代码

2.1columns用法

columns相当于一个表格的title，可以通过数据源，将自己想要的数据放入表格中

`
  const columns = [
    {
      title: '服务编号',
      dataIndex: 'serviceNumber',
      key: 'serviceNumber',
      ellipsis: true,
      render: (text, record) => {
        return <a onClick={() => reviewBtn(record)}>{text}</a>;
      },
    },
  ]

 `
 title是每一列的标题，dataIndex是对应数据源的key，可以通过render属性将每一列的元素添加点击事件，并且通过传入record将这一行的数据传给点击函数 
复制代码

2.2 点击跳转详情页

`
import { history } from 'umi';
const reviewBtn = (record) => {
    history.push({
      pathname: '/supplyDemandApproval/approved/detailDemand',
      query: {
        id: record.id,
        step: 'serviceNumber',
      },
    });
  }; 
  
在umi中引入history、，pathname是自己在路由配置中配置的组件，在跳转页面时，可以通过query进行传递参数，可以传入所点击着一行数据的任何数据，而step是自己设置的标识，以便区分所渲染的内容
  
`复制代码

2.3详情页接收参数，识别标识区分渲染

` 
  const goBack = () => {  //这是点击按钮返回放一个页面
    window.history.back();
  };
  
  
  //这个是获取传递过来的参数，就是serviceNumber
  console.log(history.location.query.step, '获取参数');
  
  //可以通过传入的参数不同，渲染不同的内容
  {history.location.query.step === 'serviceNumber' && <span>详情</span>}

`复制代码

2.4通过传入的参数判断 step组件的默认选中

`
      <Steps
            current={Number(
              history.location.query.step === 'review' || history.location.query.step === 'propose'
                ? 1
                : history.location.query.step === 'accept' || history.location.query.step === 'bill'
                ? 2
                : history.location.query.step === 'check'
                ? 3
                : history.location.query.step === 'duty'
                ? 5
                : 4
            )}
            size="small"
          >
            <Step title="需求申请" />
            <Step title="需求复核" />
            <Step title="需求受理" />
            <Step title="需求审核" />
            {history.location.query.step !== 'serviceNumber' && <Step title="资源挂载" />}
            <Step title="供需完成" />
          </Steps>
          
这里通过传入参数判断 是否渲染资源挂载这一项，在这之前使用了三目运算符的多重判断

`复制代码

dataSource是数据源，自己mock或者从后端获取的数据，数据里的属性需要和自己设置的dataIndex相对应

`
  data: {
          records: [
            {
              id: 10,
              serviceNumber: '123456',
              itemName: '最多跑哟躺啊',
              materialsName:'材料名称',
              applyScene: '应用场景',
              provideUnit: '供给部门',
              cagalogInfo: '姓名|年龄|电话',
              checkDate: '2021-11-04',
              status: '待复核',
            },
          ]
   }
`复制代码

pagination分页功能因数据条数选择性的渲染

` 
pagination={totalNum > 10 ? pagination : false}

//将pagination封装为一个对象，直接都传过去
  const pagination = {
    total: totalNum,
    showSizeChanger: true,
    showTotal: () => `共有${totalNum}条，每页显示：`,
    onChange: onPageChange,
    pageSize: pageSize,
    current: pageNum,
  };
  
  //onPageChange函数，设置状态，通过useEffect 添加依赖请求数据
    const onPageChange = (page, size) => {
        if (pageSize === size) {
          setPageNum(page);
        } else {
          setPageNum(1);
          setPageSize(size);
        }
     };

`复制代码

在table中加入树形结构，有个children属性尤为重要,默认是遇到children就认为是树形结构的下一级

作者：前端白小纯
链接：https://juejin.cn/post/7032917127719813134