ant design pro中可控的筛选和排序实例

我就废话不多说了，大家还是直接看代码吧~

import React from 'react';
import { Table, Button } from 'antd';

const data = [{
  key: '1',
  name: '张三',
  age: 22,
  address: '浙江省温州市',
}, {
  key: '2',
  name: '李四',
  age: 42,
  address: '湖南省湘潭市',
}, {
  key: '3',
  name: '王五',
  age: 12,
  address: '四川省成都市',
}, {
  key: '4',
  name: '赵六',
  age: 25,
  address: '河南省郑州市',
}, {
  key: '5',
  name: '宋二',
  age: 74,
  address: '海南省海口市',
}, {
  key: '6',
  name: '韩八',
  age: 19,
  address: '台湾省台北市',
}, {
  key: '7',
  name: '孙七',
  age: 55,
  address: '福建省福州市',
}, {
  key: '8',
  name: '金九',
  age: 81,
  address: '山西省运城市',
}];

class SortTable extends React.Component {
  state = {
    filteredInfo: null,
    sortedInfo: null,
  };
  handleChange = (pagination, filters, sorter) => {
    //pagination:{current: 1, pageSize: 10}
    //filters:{name: null, address: null}
    //sorter:{column: {…}, order: "ascend", field: "name", columnKey: "name"}
    console.log('Various parameters', pagination);
    console.log('Various parameters', filters);
    console.log('Various parameters', sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  };
  clearFilters = () => {
    this.setState({ filteredInfo: null });
  };
  clearAll = () => {
    this.setState({
      filteredInfo: null,
      sortedInfo: null,
    });
  };
  setAgeSort = () => {
    this.setState({
      sortedInfo: {
 order: 'descend',
 columnKey: 'age',
      },
    });
  };
  render() {
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [{
      title: '名字',
      dataIndex: 'name',
      key: 'name',
      filters: [
 { text: '孙', value: '孙' },
 { text: '赵', value: '赵' },
      ],
      filteredValue: filteredInfo.name || null,
      onFilter: (value, record) => record.name.includes(value),
      //sorter: (a, b) => a.name.length - b.name.length,
      sorter: (a, b) => a.name.localeCompare(b.name),//排序规则
      sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
    }, {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
      sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
    }, {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      filters: [ //筛选条件
 { text: '浙江省', value: '浙江省' },
 { text: '市', value: '市' },
      ],
      filteredValue: filteredInfo.address || null,
      onFilter: (value, record) => {
 console.log(value,"value"); //浙江省 value
 console.log(record,"record");//{key: "2", name: "李四", age: 42, address: "湖南省湘潭市"} 遍历数据 
 return record.address.includes(value);//所有的数据中 包含value(浙江省)的筛选出来
      },
      //sorter: (a, b) => a.address.length - b.address.length,
      sorter: (a,b)=>(a.address).localeCompare(b.address), 
      sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
    }];
    return (
      
 
   年龄排序
   清除筛选
   清除筛选和年龄排序
 
 {}
 
      
    );
  }
}

export default SortTable;

未排序
名字排序
名字排序
年龄排序
年龄排序
地址排序
地址排序
条件筛选
条件筛选
补充知识：Ant Design中外部控制Table组件的sorter(后端真分页，排序)
问题描述
用户当前列表页跳转至其他页面，返回后丢失排序记录，或者想通过其他按钮控制列表的排序解决方案
定义自己的Pagination，继承TablePaginationConfig
export interface MyTablePagination extends TablePaginationConfig {
 totalPages?: number;
 sort?: SorterResult;
}
分页数据来源于model控制的prop，
interface IViewProps extends Partial {
 tab: [];
 paginationAe: MyTablePagination;
 loading: boolean;
}
interface IViewStates {}
页面渲染时判断是否需要排序
class View extends React.Component {
 componentDidMount() {
  const { dispatch, pagination } = this.props;
  // 此次Params定义你访问接口传递的参数声明
  
  const params: Partial = {
   currentPage: 1,
   pageSize: pagination.pageSize,
  };
  if (pagination.sort !== '') {
   params.sort = pagination.sort;
  }
  if (dispatch) {
   dispatch({
    //你的命名空间+方法名
    type: 'your/fetchTab',
    payload: params,
   });
  }
 }
}
表格点击排序或分页的响应事件

 handleStandardTableChange = (pagination: Partial, _: any, sorter: any) => {
  const { dispatch } = this.props;
  const params: Partial = {
   currentPage: pagination.current,
   pageSize: pagination.pageSize,
  };
  if (sorter.order !== undefined) {
   params.sort = sorter;
  }
  if (dispatch) {
   dispatch({
    type: 'your/fetchTab',
    payload: params,
   });
  }
 };
行属性配置
const columns = [
   {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    sorter: true,
    sortOrder: sort && sort !== '' && sort.columnKey === 'name' ? sort.order : undefined,
   },]
表格组件

     record.name}
     columns={columns}
     loading={loading}
     dataSource={tab}
     search={false}
     options={false}
     tablealertRender={false}
     pagination={{
      ...pagination,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: () => `${pagination.current}/${pagination.totalPages}`,
     }}
     onChange={this.handleStandardTableChange}
    />
   
完整代码

import React from 'react';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import intl from 'react-intl-universal';
import { Button, Divider, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { connect, ConnectProps } from 'umi';
import { ConnectState } from '@/models/connect';
import { MyTablePagination } from '@/pages/diagnosis/audit/data';
interface IViewProps extends Partial {
 tab: [];
 paginationAe: MyTablePagination;
 loading: boolean;
}
interface IViewStates {}
class View extends React.Component {
 componentDidMount() {
  const { dispatch, pagination } = this.props;
  // 此次Params定义你访问接口传递的参数声明
  
  const params: Partial = {
   currentPage: 1,
   pageSize: pagination.pageSize,
  };
  if (pagination.sort !== '') {
   params.sort = pagination.sort;
  }
  if (dispatch) {
   dispatch({
    //你的命名空间+方法名
    type: 'your/fetchTab',
    payload: params,
   });
  }
 }

  
 handleStandardTableChange = (pagination: Partial, _: any, sorter: any) => {
  const { dispatch } = this.props;
  const params: Partial = {
   currentPage: pagination.current,
   pageSize: pagination.pageSize,
  };
  if (sorter.order !== undefined) {
   params.sort = sorter;
  }
  if (dispatch) {
   dispatch({
    type: 'your/fetchTab',
    payload: params,
   });
  }
 };

 render() {
  const { tab, pagination, loading } = this.props;
  const { sort } = pagination;

  const columns = [
   {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    sorter: true,
    sortOrder: sort && sort !== '' && sort.columnKey === 'name' ? sort.order : undefined,
   },];
  return (
   
     record.name}
     columns={columns}
     loading={loading}
     dataSource={tab}
     search={false}
     options={false}
     tablealertRender={false}
     pagination={{
      ...pagination,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: () => `${pagination.current}/${pagination.totalPages}`,
     }}
     onChange={this.handleStandardTableChange}
    />
   
  );
 }
}
export default connect(({ your, loading }: ConnectState) => ({
 tab: your.tab,
 loading: loading.effects['your/fetchTab'],
 pagination: your.pagination,
}))(View);
以上这篇ant design pro中可控的筛选和排序实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。

转载请注明：文章转载自 www.mshxw.com
本文地址：https://www.mshxw.com/it/67717.html

   上一篇  微信小程序实现滚动Tab选项卡
 
   下一篇  微信小程序自定义底部弹出框动画
  



JavaScript相关栏目本月热门文章

  
1【Linux驱动开发】设备树详解（二）设备树语法详解
  
2别跟客户扯细节
  
3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
  
4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
  
5【分页】常见两种SpringBoot项目中分页技巧
  
6一文带你搞懂OAuth2.0
  
7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
  
8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
  
9JavaSE - 封装、static成员和内部类
  
10树莓派mjpg-streamer实现监控及拍照功能调试
  
11用c++写一个蓝屏代码
  
12从JDK8源码中看ArrayList和LinkedList的区别
  
13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
  
14在openwrt使用C语言增加ubus接口（包含C uci操作）
  
15Spring 解决循环依赖
  
16SpringMVC——基于MVC架构的Spring框架
  
17Andy‘s First Dictionary C++ STL set应用
  
18动态内存管理
  
19我的创作纪念日
  
20Docker自定义镜像-Dockerfile




热门相关搜索



路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名






学习工具
代数计算器
三角函数
解析几何
立体几何


知识解答
教育知识
百科知识
生活知识
常识知识


写作必备
作文大全
作文素材
句子大全

实用范文


关于我们
关于我们
联系我们
网站地图


 
名师互学网交流群


名师互学网客服





名师互学网 版权所有 (c)2021-2022      ICP备案号：晋ICP备2021003244-6号
 




关于我们
文章归档
网站地图
联系我们
版权所有 (c)2021-2022 MSHXW.COM
ICP备案号：晋ICP备2021003244-6号