首页 >> js开发 >> jsant design pro中可控的筛选和排序实例js大全
jsant design pro中可控的筛选和排序实例js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
我就废话不多说了,大家还是直接看代码吧~
/**
* Created by hao.cheng on 2021/4/15.
*/
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 (
{/*columns标题栏
dataSource内容栏根据标题填充数据*/}
);
}
}
export default SortTable;
/**
* Created by hao.cheng on 2021/4/15.
*/
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 (
{/*columns标题栏
dataSource内容栏根据标题填充数据*/}
);
}
}
export default SortTable;
未排序名字排序名字排序年龄排序年龄排序地址排序地址排序条件筛选条件筛选补充知识:Ant Design中外部控制Table组件的sorter(后端真分页,排序)补充知识:补充知识:Ant Design中外部控制Table组件的sorter(后端真分页,排序)问题描述问题描述用户当前列表页跳转至其他页面,返回后丢失排序记录,或者想通过其他按钮控制列表的排序解决方案定义自己的Pagination,继承TablePaginationConfig
export interface MyTablePagination extends TablePaginationConfig {
totalPages?: number;
sort?: SorterResult;
}
export interface MyTablePagination extends TablePaginationConfig {
totalPages?: number;
sort?: SorterResult;
}分页数据来源于model控制的prop,
interface IViewProps extends Partial {
tab: [];
paginationAe: MyTablePagination;
loading: boolean;
}
interface IViewStates {}
interface IViewProps extends Partial {
tab: [];
paginationAe: MyTablePagination;
loading: boolean;
}
interface IViewStates {}页面渲染时判断是否需要排序
class View extends React.Component {
componentDidMount() {
const { dispatch, pagination } = this.props;
// 此次Params定义你访问接口传递的参数声明
/*类似:
export interface OpcParamsType {
// 通用参数
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial = {
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空间+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
}
class View extends React.Component {
componentDidMount() {
const { dispatch, pagination } = this.props;
// 此次Params定义你访问接口传递的参数声明
/*类似:
export interface OpcParamsType {
// 通用参数
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial = {
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空间+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
}表格点击排序或分页的响应事件
/**
* @name: 表格分页点击事件
* @msg:
* @param {type}
* @return:
*/
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,
});
}
};
/**
* @name: 表格分页点击事件
* @msg:
* @param {type}
* @return:
*/
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,
},]
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
sorter: true,
sortOrder: sort && sort !== '' && sort.columnKey === 'name' ? sort.order : undefined,
},]表格组件表格组件
rowKey={(record) => 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}
/>
rowKey={(record) => 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}
/>
完整代码完整代码
/* eslint-disable react/no-unused-state */
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定义你访问接口传递的参数声明
/*类似:
export interface OpcParamsType {
// 通用参数
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial = {
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空间+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
/**
* @name: 表格分页点击事件
* @msg:
* @param {type}
* @return:
*/
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 (
rowKey={(record) => 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);
/* eslint-disable react/no-unused-state */
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定义你访问接口传递的参数声明
/*类似:
export interface OpcParamsType {
// 通用参数
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial = {
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空间+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
/**
* @name: 表格分页点击事件
* @msg:
* @param {type}
* @return:
*/
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 (
rowKey={(record) => 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中可控的筛选和排序实例就是小编分享给大家的全部内容了,希望能给大家一个参考。
/**
* Created by hao.cheng on 2021/4/15.
*/
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 (
{/*columns标题栏
dataSource内容栏根据标题填充数据*/}
);
}
}
export default SortTable;
/**
* Created by hao.cheng on 2021/4/15.
*/
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 (
{/*columns标题栏
dataSource内容栏根据标题填充数据*/}
);
}
}
export default SortTable;
未排序名字排序名字排序年龄排序年龄排序地址排序地址排序条件筛选条件筛选补充知识:Ant Design中外部控制Table组件的sorter(后端真分页,排序)补充知识:补充知识:Ant Design中外部控制Table组件的sorter(后端真分页,排序)问题描述问题描述用户当前列表页跳转至其他页面,返回后丢失排序记录,或者想通过其他按钮控制列表的排序解决方案定义自己的Pagination,继承TablePaginationConfig
export interface MyTablePagination extends TablePaginationConfig {
totalPages?: number;
sort?: SorterResult;
}
export interface MyTablePagination extends TablePaginationConfig {
totalPages?: number;
sort?: SorterResult;
}分页数据来源于model控制的prop,
interface IViewProps extends Partial
tab: [];
paginationAe: MyTablePagination;
loading: boolean;
}
interface IViewStates {}
interface IViewProps extends Partial
tab: [];
paginationAe: MyTablePagination;
loading: boolean;
}
interface IViewStates {}页面渲染时判断是否需要排序
class View extends React.Component
componentDidMount() {
const { dispatch, pagination } = this.props;
// 此次Params定义你访问接口传递的参数声明
/*类似:
export interface OpcParamsType {
// 通用参数
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空间+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
}
class View extends React.Component
componentDidMount() {
const { dispatch, pagination } = this.props;
// 此次Params定义你访问接口传递的参数声明
/*类似:
export interface OpcParamsType {
// 通用参数
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空间+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
}表格点击排序或分页的响应事件
/**
* @name: 表格分页点击事件
* @msg:
* @param {type}
* @return:
*/
handleStandardTableChange = (pagination: Partial
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,
});
}
};
/**
* @name: 表格分页点击事件
* @msg:
* @param {type}
* @return:
*/
handleStandardTableChange = (pagination: Partial
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,
},]
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
sorter: true,
sortOrder: sort && sort !== '' && sort.columnKey === 'name' ? sort.order : undefined,
},]表格组件表格组件
rowKey={(record) => 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}
/>
rowKey={(record) => 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}
/>
/* eslint-disable react/no-unused-state */
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定义你访问接口传递的参数声明
/*类似:
export interface OpcParamsType {
// 通用参数
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空间+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
/**
* @name: 表格分页点击事件
* @msg:
* @param {type}
* @return:
*/
handleStandardTableChange = (pagination: Partial
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 (
rowKey={(record) => 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);
/* eslint-disable react/no-unused-state */
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定义你访问接口传递的参数声明
/*类似:
export interface OpcParamsType {
// 通用参数
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空间+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
/**
* @name: 表格分页点击事件
* @msg:
* @param {type}
* @return:
*/
handleStandardTableChange = (pagination: Partial
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 (
rowKey={(record) => 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中可控的筛选和排序实例就是小编分享给大家的全部内容了,希望能给大家一个参考。
相关文章:
- jsVue Elenent实现表格相同数据列合并js大全
- jsNodeJS配置CORS实现过程详解js大全
- jsJQuery绑定事件四种实现方法解析js大全
- js代码JavaScript async/await原理及实例解析
- js代码JavaScript 如何在浏览器中使用摄像头
- JavaScriptjs 数据类型判断的方法
- js代码为什么JavaScript中0.1 + 0.2 != 0.3
- jsJavascript节流函数throttle和防抖函数debouncejs大全
- js基于vue项目设置resolves.alias: '@'路径并适配webstormjs大全
- js如何实现vue的tree组件js大全