欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ant design pro中可控的篩選和排序?qū)嵗?/h1>
 更新時(shí)間：2020年11月17日 10:16:17   作者：aminwangaa  
這篇文章主要介紹了ant design pro中可控的篩選和排序?qū)嵗?，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

/**
 * 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(浙江省)的篩選出來(lái)
      },
      //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(后端真分頁(yè)，排序)

問(wèn)題描述

用戶當(dāng)前列表頁(yè)跳轉(zhuǎn)至其他頁(yè)面，返回后丟失排序記錄，或者想通過(guò)其他按鈕控制列表的排序解決方案

定義自己的Pagination，繼承TablePaginationConfig

export interface MyTablePagination extends TablePaginationConfig {
 totalPages?: number;
 sort?: SorterResult<any>;
}

分頁(yè)數(shù)據(jù)來(lái)源于model控制的prop，

interface IViewProps extends Partial<ConnectProps> {
 tab: [];
 paginationAe: MyTablePagination;
 loading: boolean;
}
interface IViewStates {}

頁(yè)面渲染時(shí)判斷是否需要排序

class View extends React.Component<IViewProps, IViewStates> {
 componentDidMount() {
  const { dispatch, pagination } = this.props;
  // 此次Params定義你訪問(wèn)接口傳遞的參數(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è)的響應(yīng)事件

/**
  * @name: 表格分頁(yè)點(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定義你訪問(wèn)接口傳遞的參數(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: 表格分頁(yè)點(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)文章

  • VUE DOM加載后執(zhí)行自定義事件的方法

    VUE DOM加載后執(zhí)行自定義事件的方法

    今天小編就為大家分享一篇VUE DOM加載后執(zhí)行自定義事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue3的watch用法以及和vue2中watch的區(qū)別

    vue3的watch用法以及和vue2中watch的區(qū)別

    這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • vue中的事件修飾符介紹和示例

    vue中的事件修飾符介紹和示例

    在Vue中，修飾符處理了許多DOM事件的細(xì)節(jié)，讓我們不再需要花大量的時(shí)間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理,需要的朋友可以參考下
    2023-04-04
  • 關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問(wèn)題解析

    關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問(wèn)題解析

    這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問(wèn)題解析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-04-04
  • 淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)

    淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)

    這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • 使用Vue-cli 中為單獨(dú)頁(yè)面設(shè)置背景圖片鋪滿全屏

    使用Vue-cli 中為單獨(dú)頁(yè)面設(shè)置背景圖片鋪滿全屏

    這篇文章主要介紹了使用Vue-cli 中為單獨(dú)頁(yè)面設(shè)置背景圖片鋪滿全屏，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • 詳解?Vue虛擬DOM如何提高前端開(kāi)發(fā)效率

    詳解?Vue虛擬DOM如何提高前端開(kāi)發(fā)效率

    這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開(kāi)發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-12-12
  • vue項(xiàng)目git提交及服務(wù)器部署方法

    vue項(xiàng)目git提交及服務(wù)器部署方法

    這篇文章主要介紹了vue項(xiàng)目 git提交及服務(wù)器部署方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-07-07
  • Unocss(原子化css)?使用及vue3?+?vite?+?ts講解

    Unocss(原子化css)?使用及vue3?+?vite?+?ts講解

    這篇文章主要介紹了Unocss(原子化css)使用vue3?+?vite?+?ts的方法,簡(jiǎn)單介紹了Unocss使用及圖標(biāo)庫(kù)使用，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2022-11-11
  • vue如何在新窗口打開(kāi)頁(yè)面

    vue如何在新窗口打開(kāi)頁(yè)面

    這篇文章主要介紹了vue如何在新窗口打開(kāi)頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11

最新評(píng)論