搜遍全网都没搜到的proTable实现表单查询功能

request属性的使用

官网代码：

<ProTable<DataType, Params>
  // params 是需要自带的参数
  // 这个参数优先级更高，会覆盖查询表单的参数
  params={params}
  request={async (
    // 第一个参数 params 查询表单和 params 参数的结合
    // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
    params: T & {
      pageSize: number;
      current: number;
    },
    sort,
    filter,
  ) => {
    // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
    // 如果需要转化参数可以在这里进行修改
    const msg = await myQuery({
      page: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: msg.result,
      // success 请返回 true，
      // 不然 table 会停止解析数据，即使有数据
      success: boolean,
      // 不传会使用 data 的长度，如果是分页一定要传
      total: number,
    };
  }}
/>

从这里可以看出，request属性中是一个函数，该函数里需要使用promise返回table的数据，通过返回一个对象渲染table

我的实现

import React from 'react'
import DblogTableUI from './DblogTableUI'
import { connect } from 'react-redux'
import Immutable from 'immutable'
import _ from 'lodash'
import {
  setDblogDetail,
  setDblogList,
  setOnDownload,
  setOnExecute,
  setSearchKeywords,
  dblogList
} from '../../actions/dblogAction'
import msg from '../../../public/msg'
import PubSub from 'pubsub-js'
import { GET_DETAIL } from '../../constants/Constants'

const actionRef = React.createRef()
const formRef = React.createRef()

class DblogTable extends React.PureComponent {

  constructor (props) {
    super(props)
    this.state = {
      dblogList: []
    }
  }

  static getDerivedStateFromProps (nextProps, prevState) {
    const nextState = {}
    const { dblogLists, searchKeywords } = nextProps
    if (!Immutable.is(dblogLists, prevState.dblogLists)) {
      nextState.dblogLists = dblogLists
    }
    if (!Immutable.is(searchKeywords, prevState.searchKeywords)) {
      nextState.searchKeywords = searchKeywords
    }
    if (!_.isEmpty(nextState)) {
      return nextState
    }
    return null
  }

  onDetail = (record) => {
    this.props.dispatch(setDblogDetail(Immutable.fromJS(record)))
    PubSub.publish(GET_DETAIL)
  }
  onDownload = (record) => {
    const { dispatch } = this.props
    dispatch(setOnDownload(record)).then((txtMsg) => {
      msg.success(txtMsg)
    }, (err) => {
      msg.error(err)
    })
  }
  
  onExecute = (record) => {
    const { installedResult } = record
    if (installedResult === '执行中') {
      msg.error('“执行中”的脚本不允许再次执行')
    } else {
      const { dispatch } = this.props
      dispatch(setOnExecute(record)).then((data) => {
        dispatch(setDblogList())
        msg.success(data)
      }, (data) => {
        msg.error(data)
      })
    }
  }
  onsubmit = () => {
    const fieldsValue = formRef.current.getFieldsValue()
    const { dispatch } = this.props
    //存储搜索关键字对象
    dispatch(setSearchKeywords(Immutable.fromJS(fieldsValue)))

  }
  onReset = () => {
    const { dispatch } = this.props
    dispatch(setSearchKeywords(Immutable.fromJS({})))
  }
  getNewList = (newList, key, keyword) => {
    return newList.filter(item => item[key].includes(keyword))
  }
  getQueryList = () => {
    return new Promise((resolve, reject) => {
      const { dblogLists, searchKeywords } = this.state
      const { dispatch } = this.props
      let newList = dblogLists.toJS()
      if (Object.keys(searchKeywords.toJS()).length === 0) {
        dispatch(setDblogList())
      } else {
        for (const key in searchKeywords.toJS()) {
          //取查询表单有值的选项
          if (typeof (searchKeywords.toJS()[key]) !== 'undefined') {
            //逐个筛选，返回新数组
            newList = this.getNewList(newList, key, searchKeywords.toJS()[key])
          }
        }
      }
      resolve(newList)
      dispatch(dblogList(Immutable.fromJS(newList)))
    })
  }

  render () {

    const { height } = this.props
    return (
      <DblogTableUI
        height={height}
        onDetail={this.onDetail}
        onDownload={this.onDownload}
        onExecute={this.onExecute}
        onsubmit={this.onsubmit}
        formRef={formRef}
        actionRef={actionRef}
        onReset={this.onReset}
        request={async ({ pageSize, current }, a, b) => {
          const data = await this.getQueryList()
          return {
            data,
            success: true
          }
        }}
      />
    )
  }
}

const mapStateToProps = (state) => {
  return {
    dblogLists: state.getIn(['getDblogList', 'dblogList']),
    searchKeywords: state.get('getSearchKeyWords')
  }
}
export default connect(mapStateToProps)(DblogTable)

具体分析

request属性

request={async ({ pageSize, current }, a, b) => {
			//通过一个promise函数返回data数据
          const data = await this.getQueryList()
          return {
            data,
            success: true
          }
        }}

查询方法实现

在这里我用的是逐个筛选。筛选第一个查询表单不为undefined的字段，返回新数组，再用新数组去筛选下一个表单不为undefined的字段。都查询完后通过resolve返回给data