antd Pro@4踩坑记录

1.proTable

具体有关这个可以访问ProTable的官方：antd proTable，这个可以看一下；利用这个开发后台管理系统，效率特别高，而且还没有冗余代码；具体请看：

• columns

  const columns: ProColumns[] = [
    {
      title: 'ID',//表格的表头
      dataIndex: 'id',//对应你的字段名称
      valueType: 'text',//
      search: false,//是否要把此项当成一个检索的条件
    },
    {
      title: '分类',
      ellipsis: true,//文字超出不换行，显示省略号，鼠标悬浮的时候可以把该字段显示全
      dataIndex: 'classifyMenuId',
      renderFormItem(item, config){//自定义搜索的form，注意config的传入
        //其实config里面有一个onChange方法，当发生变化的时候一定要触发这个onChange方法
        return (
          
        )
      },
      render(_, record:any){//自定义表格的显示样式
        return (
          {record.classifyCompleteName}
        )
      }
    },
    {
      title: '资料名称',
      dataIndex: 'resourceName',
      ellipsis: true,
      valueType: 'text',
    },
    {
      title: '版本',
      dataIndex: 'resourceVersion',
      search: false,
    },
    {
      title: '操作人',
      dataIndex: 'adminName',
      search: false,
      width: '80px',//设置此列的宽度，注意一定要给表格的横向设置100%，否则此设置就会失效
      render(_, record: TableListItem){
        return (
           onVisibleChange(val, record)} content={content} placement='rightBottom'>
            {record.adminName}
          
        )
      },
    },
    {
      title: '编辑时间',
      dataIndex: 'utime',
      valueType: 'dateTime',//把时间戳格式化成年月日，时分秒
      width: '180px',
      search: false,
    },
    {
      title: '是否上线',
      dataIndex: 'onlineType',
      search: false,
      valueType: 'text',
      width: '75px',
      render(_, record){
        return  onSwitchChange(val, record)} />
      }
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: '210px',
      render: (_, record) => (
        <>
           onEdit(true, record)}
            type='link'>编辑
           onPreview(record)}
            type='link'>预览
           onDelete(record)}
            type='link'>删除
        
      ),
    },
  ]

• Protable的设置项

我这个组件HtTable是在proTable的基础上封装的，对于proTable要求的一些属性都是支持的

     [
         onEdit(false, {})}>
           新增资料
        ,
      ]}
      request={(params, sorter, filter) => getTableData({ params, sorter, filter })}//表格请求时要执行的方法，注意getTableData这个方法的返回值需要符合指定的格式
      columns={columns}//表格的表头对应的字段
    />

 

• 请求数据的方法request

ProTable中的request方法，

import {getData} from './service'
....省略
 {
        //params是检索条件对应的数据格式
    	let data = Object.assign(params,...把其它需要的参数，绑定到params)
        //接口返回来的数据
		let res = await getData(data)
        //此处要格外注意，返回的数据格式一定要是此种结构，而且以下这三项是必须的
        return {
            data:data ,
            success:true
            total:data.total
        }
    }}
    
    
  />

• 实现proTable的刷新操作（以Hook组件未例子）

import React, { useEffect, useRef } from 'react'

export interface ActionType {
  reload: () => void;
  fetchMore: () => void;
  reset: () => void;
}

//1.生成一个ref，这个actionType是TS用来限制类型的，
const ref = useRef()

/2.把这个ref挂载到ProTable上，就是用actionRef去承接这个ref
     []}
      request={(params) => getTableList(params)}
      columns={columns}
    />
//3.需要用到刷新表格的地方，执行一下代码：
    ref.current.reload()

2.BasicLayout

具体请看ProLayout的官方文档：layout