ant design pro中可控的篩選和排序?qū)嵗?/h1>
更新時(shí)間:2020年11月17日 10:16:17 作者:aminwangaa
這篇文章主要介紹了ant design pro中可控的篩選和排序?qū)嵗?,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了,大家還是直接看代碼吧~
/**
* Created by hao.cheng on 2017/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: '臺(tái)灣省臺(tái)北市',
}, {
key: '7',
name: '孫七',
age: 55,
address: '福建省福州市',
}, {
key: '8',
name: '金九',
age: 81,
address: '山西省運(yùn)城市',
}];
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),//排序規(guī)則
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: "湖南省湘潭市"} 遍歷數(shù)據(jù)
return record.address.includes(value);//所有的數(shù)據(jù)中 包含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 (
<div>
<div className="table-operations">
<Button onClick={this.setAgeSort}>年齡排序</Button>
<Button onClick={this.clearFilters}>清除篩選</Button>
<Button onClick={this.clearAll}>清除篩選和年齡排序</Button>
</div>
{/*columns標(biāo)題欄 dataSource內(nèi)容欄根據(jù)標(biāo)題填充數(shù)據(jù)*/}
<Table columns={columns} dataSource={data} onChange={this.handleChange} />
</div>
);
}
}
export default SortTable;
未排序

名字排序

名字排序

年齡排序

年齡排序

地址排序

地址排序

條件篩選

條件篩選

補(bǔ)充知識(shí):Ant Design中外部控制Table組件的sorter(后端真分頁,排序)
問題描述
用戶當(dāng)前列表頁跳轉(zhuǎn)至其他頁面,返回后丟失排序記錄,或者想通過其他按鈕控制列表的排序解決方案
定義自己的Pagination,繼承TablePaginationConfig
export interface MyTablePagination extends TablePaginationConfig {
totalPages?: number;
sort?: SorterResult<any>;
}
分頁數(shù)據(jù)來源于model控制的prop,
interface IViewProps extends Partial<ConnectProps> {
tab: [];
paginationAe: MyTablePagination;
loading: boolean;
}
interface IViewStates {}
頁面渲染時(shí)判斷是否需要排序
class View extends React.Component<IViewProps, IViewStates> {
componentDidMount() {
const { dispatch, pagination } = this.props;
// 此次Params定義你訪問接口傳遞的參數(shù)聲明
/*類似:
export interface OpcParamsType {
// 通用參數(shù)
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial<Params> = {
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空間+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
}
表格點(diǎn)擊排序或分頁的響應(yīng)事件
/**
* @name: 表格分頁點(diǎn)擊事件
* @msg:
* @param {type}
* @return:
*/
handleStandardTableChange = (pagination: Partial<MyTablePagination>, _: any, sorter: any) => {
const { dispatch } = this.props;
const params: Partial<Params> = {
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,
},]
表格組件
<div>
<ProTable
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}
/>
</div>
完整代碼
/* 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<ConnectProps> {
tab: [];
paginationAe: MyTablePagination;
loading: boolean;
}
interface IViewStates {}
class View extends React.Component<IViewProps, IViewStates> {
componentDidMount() {
const { dispatch, pagination } = this.props;
// 此次Params定義你訪問接口傳遞的參數(shù)聲明
/*類似:
export interface OpcParamsType {
// 通用參數(shù)
currentPage?: number;
pageSize?: number;
id?: number;
ids?: any;
}
*/
const params: Partial<Params> = {
currentPage: 1,
pageSize: pagination.pageSize,
};
if (pagination.sort !== '') {
params.sort = pagination.sort;
}
if (dispatch) {
dispatch({
//你的命名空間+方法名
type: 'your/fetchTab',
payload: params,
});
}
}
/**
* @name: 表格分頁點(diǎn)擊事件
* @msg:
* @param {type}
* @return:
*/
handleStandardTableChange = (pagination: Partial<MyTablePagination>, _: any, sorter: any) => {
const { dispatch } = this.props;
const params: Partial<Params> = {
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 (
<div>
<ProTable
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}
/>
</div>
);
}
}
export default connect(({ your, loading }: ConnectState) => ({
tab: your.tab,
loading: loading.effects['your/fetchTab'],
pagination: your.pagination,
}))(View);
以上這篇ant design pro中可控的篩選和排序?qū)嵗褪切【幏窒斫o大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
-
vue3的watch用法以及和vue2中watch的區(qū)別
這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教 2023-04-04
-
關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析
這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下 2021-04-04
-
淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧 2019-05-05
-
使用Vue-cli 中為單獨(dú)頁面設(shè)置背景圖片鋪滿全屏
這篇文章主要介紹了使用Vue-cli 中為單獨(dú)頁面設(shè)置背景圖片鋪滿全屏,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧 2020-07-07
-
Unocss(原子化css)?使用及vue3?+?vite?+?ts講解
這篇文章主要介紹了Unocss(原子化css)使用vue3?+?vite?+?ts的方法,簡(jiǎn)單介紹了Unocss使用及圖標(biāo)庫使用,通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下 2022-11-11
最新評(píng)論
我就廢話不多說了,大家還是直接看代碼吧~
/** * Created by hao.cheng on 2017/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: '臺(tái)灣省臺(tái)北市', }, { key: '7', name: '孫七', age: 55, address: '福建省福州市', }, { key: '8', name: '金九', age: 81, address: '山西省運(yùn)城市', }]; 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),//排序規(guī)則 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: "湖南省湘潭市"} 遍歷數(shù)據(jù) return record.address.includes(value);//所有的數(shù)據(jù)中 包含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 ( <div> <div className="table-operations"> <Button onClick={this.setAgeSort}>年齡排序</Button> <Button onClick={this.clearFilters}>清除篩選</Button> <Button onClick={this.clearAll}>清除篩選和年齡排序</Button> </div> {/*columns標(biāo)題欄 dataSource內(nèi)容欄根據(jù)標(biāo)題填充數(shù)據(jù)*/} <Table columns={columns} dataSource={data} onChange={this.handleChange} /> </div> ); } } export default SortTable;
未排序
名字排序
名字排序
年齡排序
年齡排序
地址排序
地址排序
條件篩選
條件篩選
補(bǔ)充知識(shí):Ant Design中外部控制Table組件的sorter(后端真分頁,排序)
問題描述
用戶當(dāng)前列表頁跳轉(zhuǎn)至其他頁面,返回后丟失排序記錄,或者想通過其他按鈕控制列表的排序解決方案
定義自己的Pagination,繼承TablePaginationConfig
export interface MyTablePagination extends TablePaginationConfig { totalPages?: number; sort?: SorterResult<any>; }
分頁數(shù)據(jù)來源于model控制的prop,
interface IViewProps extends Partial<ConnectProps> { tab: []; paginationAe: MyTablePagination; loading: boolean; } interface IViewStates {}
頁面渲染時(shí)判斷是否需要排序
class View extends React.Component<IViewProps, IViewStates> { componentDidMount() { const { dispatch, pagination } = this.props; // 此次Params定義你訪問接口傳遞的參數(shù)聲明 /*類似: export interface OpcParamsType { // 通用參數(shù) currentPage?: number; pageSize?: number; id?: number; ids?: any; } */ const params: Partial<Params> = { currentPage: 1, pageSize: pagination.pageSize, }; if (pagination.sort !== '') { params.sort = pagination.sort; } if (dispatch) { dispatch({ //你的命名空間+方法名 type: 'your/fetchTab', payload: params, }); } } }
表格點(diǎn)擊排序或分頁的響應(yīng)事件
/** * @name: 表格分頁點(diǎn)擊事件 * @msg: * @param {type} * @return: */ handleStandardTableChange = (pagination: Partial<MyTablePagination>, _: any, sorter: any) => { const { dispatch } = this.props; const params: Partial<Params> = { 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, },]
表格組件
<div> <ProTable 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} /> </div>
完整代碼
/* 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<ConnectProps> { tab: []; paginationAe: MyTablePagination; loading: boolean; } interface IViewStates {} class View extends React.Component<IViewProps, IViewStates> { componentDidMount() { const { dispatch, pagination } = this.props; // 此次Params定義你訪問接口傳遞的參數(shù)聲明 /*類似: export interface OpcParamsType { // 通用參數(shù) currentPage?: number; pageSize?: number; id?: number; ids?: any; } */ const params: Partial<Params> = { currentPage: 1, pageSize: pagination.pageSize, }; if (pagination.sort !== '') { params.sort = pagination.sort; } if (dispatch) { dispatch({ //你的命名空間+方法名 type: 'your/fetchTab', payload: params, }); } } /** * @name: 表格分頁點(diǎn)擊事件 * @msg: * @param {type} * @return: */ handleStandardTableChange = (pagination: Partial<MyTablePagination>, _: any, sorter: any) => { const { dispatch } = this.props; const params: Partial<Params> = { 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 ( <div> <ProTable 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} /> </div> ); } } export default connect(({ your, loading }: ConnectState) => ({ tab: your.tab, loading: loading.effects['your/fetchTab'], pagination: your.pagination, }))(View);
以上這篇ant design pro中可控的篩選和排序?qū)嵗褪切【幏窒斫o大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3的watch用法以及和vue2中watch的區(qū)別
這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析
這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05使用Vue-cli 中為單獨(dú)頁面設(shè)置背景圖片鋪滿全屏
這篇文章主要介紹了使用Vue-cli 中為單獨(dú)頁面設(shè)置背景圖片鋪滿全屏,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07Unocss(原子化css)?使用及vue3?+?vite?+?ts講解
這篇文章主要介紹了Unocss(原子化css)使用vue3?+?vite?+?ts的方法,簡(jiǎn)單介紹了Unocss使用及圖標(biāo)庫使用,通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11