Ant Design Pro 의 ProTable 사용 동작

태그

Pro-Table 은 아 리 앤 트 디자인 프로 V4 버 전 으로 Table 을 바탕 으로 한 구성 요소 로 완전한 삭제 와 검사 논 리 를 포함 하고 복잡 한 조작 없 이 몇 개의 설정 만 간단하게 하면 실현 할 수 있 습 니 다.
홈 페이지 Api 주소
https://protable.ant.design/
예시
V4 버 전이 나 온 지 얼마 되 지 않 아 인터넷 의 튜 토리 얼 이 비교적 적 고 많은 구 덩이 를 밟 았 습 니 다.자신의 학습 과정 을 공유 하고 도움 이 되 기 를 바 랍 니 다.
프로젝트 생 성(node.js 및 npm 환경 필요)


npm config set registry https://registry.npm.taobao.org
npm i yarn -g
yarn config set registry https://registry.npm.taobao.org
//            
yarn create umi my-app
cd my-app
yarn
yarn start

프로젝트 생 성 완료 후 그림 참조

로그 인 후 그림 참조

메뉴 추가
V4 버 전 디 렉 터 리 구조 가 약간 바 뀌 었 고 영향 이 크 지 않 으 므 로 절차 에 따라 만 들 면 됩 니 다.

완료 후 basic Customer.tsx 에 helloworld 를 기록 하여 성공 적 으로 접근 할 수 있 는 지 테스트 합 니 다.


import React from "react"; 
class Customer extends React.Component{
 
 render(){
  return (
    <div>helloworld</div>
  );
 }
} 
export default Customer;

성공 후 아래 코드 로 교체


import { DownOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Dropdown, Menu} from 'antd';
import React, { useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { selectPage } from './service'; 
 
const TableList: React.FC<{}> = () => {
 const actionRef = useRef<ActionType>();
 const columns: ProColumns[] = [
  {
   title: '    ',  //       
   dataIndex: 'name', //              ，            
   width: '20%',
  },
  {
   title: '    ',
   dataIndex: 'nature',
   filters: [   //         
    { text: '  ', value: '  ' },
    { text: '     ', value: '     ' },
   ],
   width: '20%',
  },
  {
   title: '   ',
   dataIndex: 'linkMan',
   hideInSearch : 'false', //          
  },
  {
   title: '    ',
   dataIndex: 'linkPhone',
   hideInSearch : 'false',
  },
  {
   title: '  ',
   dataIndex: 'taxNumber',
  },
  {
   title: '  ',
   dataIndex: 'status',
   valueEnum: {        //       
    false: { text: '  ', status: 'Error' },    //false      ，text      ，status antd     ，   api
    true: { text: '  ', status: 'Success' },
   },
  },
 ];
 
 return (
  <PageHeaderWrapper>  //    
   <ProTable      //  Pro  
    headerTitle="    "  //  
    actionRef={actionRef}  //         ， api
    rowKey="id"        //    key    ，           
    toolBarRender={(action, { selectedRows }) => [
     <Button icon={<PlusOutlined />} type="primary" onClick={()=>{}}>
        
     </Button>,
     selectedRows && selectedRows.length > 0 && (
      <Dropdown
       overlay={
        <Menu
         selectedKeys={[]}
        >
         <Menu.Item key="remove">    </Menu.Item>
        </Menu>
       }
      >
       <Button>
             <DownOutlined />
       </Button>
      </Dropdown>
     ),
    ]}
    request={(params) => selectPage(params)}//       ，    mock    ，          
    columns={columns}  //     
    rowSelection={{}}
   />
  </PageHeaderWrapper>
 );
}; 
export default TableList;

다음은 요청 데이터 서비스 입 니 다.


import Qs from "qs";
import request from "umi-request";
 
const getRandomuserParams = (params:any) => {
 return {
  pageSize: params.pageSize,
  pageIndex: params.current,
  ...params
 };
}; 
 
export async function selectPage(params:any) {
 console.log(getRandomuserParams(params))
 const res = request('/server/api/basic/basicCustomer/selectPageListCopy', {
  method: 'POST',
  headers:{
   'Content-Type':'application/x-www-form-urlencoded',
   appId: '1117664844619845632',
   token: 'eyJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1ODYzNDQ2MjcsImlkIjoiNzkxNzA2Y2Q2M2RiM2EwMSIsImV4cCI6MTU4ODkzNjYyNywiaWF0IjoxNTg2MzQ0NjI3fQ.Gtmm-TZHlMFiEV34ncrLryjzNsv07DwnCYsChQcYEWg'
  },
  data: Qs.stringify(getRandomuserParams(params)),
 });
 
 return res;
}

앞 뒤 분리 에 크로스 필드 문제 가 발생 할 수 있 습 니 다.proxy 에 프 록 시 를 설정 하여 해결 합 니 다.

'/server/api/'는 이 로 시작 하 는 요청 을 모두 차단 하고 pathRewrite 는 요청 을 보 낼 때 생략 한 것 을 표시 합 니 다.
설정 완료 후 접근,

이미 성공 한 것 을 볼 수 있 습 니 다.페이지 나 누 기,헤더 선별,조건 조회 등 을 포함 하여 모두 사용 할 수 있 습 니 다.추가 삭 제 는 아직 쓰 지 않 았 습 니 다.나중에 보충 하 세 요!
추가 지식:ant-design-pro 의 ProTable 에서 column 에 valueEnum 속성 설정
주어진 기본 값 이 라면 다음 과 같이 사용 하 십시오.


 {
   title: '    ',
   dataIndex: 'overdue',
   key: 'overdue',
   valueEnum: {
   0: {text: '   ',},
   1: {text: '   ',},
   },
 }

미리 정의 하 다


 const enumList = {
 0: { text: '   ' },
 1: { text: '   ' },
 };
------------------------    ----------------------------
  {
      title: '    ',
      dataIndex: 'overdue',
      key: 'overdue',
      valueEnum: enumList
    }

그러나 만약 valueEnum 의 값 이 인 터 페 이 스 를 통 해 얻 은 것 이 라면,예 를 들 어 데이터베이스 에 있 는 사용자 id 를 key 로 하고 싶 습 니 다.userName 을 text:값 으로 하고 싶 습 니 다.데 이 터 는 동적 으로 변화 하기 때문에 매 거 진 직접 사용자 정의 할 수 없습니다.다음은 해결 방법 을 제시 합 니 다.


const [datas, setDatas] = useState({})
  useEffect(() => {
  //    
   listOverdue().then((res) => {
   //      
    if(res.bizCode===200){
     let data = {};
     //         
     res.data.map(item=>{
  //        id        0，1
      data[item.id]={
  //         overdueValue       text:    
       text: item.overdueValue,
      }
     })
     setDatas(data) 
    }     
  })
 }, []);
 ----------------    -----------------------------
 {
   title: '    ',
   dataIndex: 'overdue',
   key: 'overdue',
   valueEnum: datas
   }

이렇게 하면 쓸 수 있 잖 아 요.
이상 의 Ant Design Pro 의 ProTable 사용 조작 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 저희 도 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

java_command_매크로 명령

introduction: 이렇게 하는 목적은'하드 인코딩'을 줄이고 명령의 조합을 동태적으로 결정하여 사용에 더욱 유연하게 할 수 있다. 일반적으로 매크로 명령의 방법은 더욱 우아하고 비교적 적은 새로운 코드가 필요...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Ant Design Pro 의 ProTable 사용 동작

좋은 웹페이지 즐겨찾기