Ant design pro v4 js ProTable demo

环境 ：Ant design pro v4 js

核心代码：

1、搜索框 search={true} ，如果不想显示每个字段，那么在column中设置search: false

2、表格工具栏，options={options}  有相关的几个属性，true和false

以下是我写的demo例子

import React, { useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { queryModule } from './service';

const TableList = () => {
  const actionRef = useRef();
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      search: false,
      align: 'center',
      render: (dom, record, index) => {
        if (actionRef.current.pageInfo.current > 1) {
          return (actionRef.current.pageInfo.current - 1) * actionRef.current.pageInfo.pageSize + index + 1;
        } else {
          return index + 1;
        }
      },
    },
    {
      title: '上级模块',
      dataIndex: 'parentName',
    },
    {
      title: '模块名称',
      dataIndex: 'resourceName',
    },
    {
      title: '模块key',
      dataIndex: 'resourceKey',
      search: false
    },
    {
      title: '模块描述',
      dataIndex: 'resourceDesc',
      search: false,
    },
    {
      title: '是否停用',
      dataIndex: 'isDelete',
      search: false,
      align: 'center',
      render: (dom, record, index, action) => {
        if (record.isDelete === 0) {
          return '正常';
        }
        return '停用'
      }
    }
  ];
  const options = {
    density: false,//密度
    fullScreen: false,//最大化
    reload: true, //刷新
    setting: true //设置
  }
  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        headerTitle="模块列表"
        rowKey="resourceId"
        request={(params, sorter, filter) => queryModule({ ...params, sorter, filter })}
        columns={columns}
        options={options}        
        search={true}//false禁用搜索
      />
    </PageContainer>
  );
};

export default TableList;

 

具体demo见官网：https://procomponents.ant.design/components/table/?current=1&pageSize=5