网络编程 
首页 > 网络编程 > 浏览文章

antd通过 filterDropdown 自定义按某天时间搜索功能

(编辑:jimmy 日期: 2024/11/6 浏览:3 次 )

antd通过 filterDropdown 自定义按某天时间搜索功能

import React, { Component } from 'react';
import { Table, Input, Button, Icon, DatePicker } from 'antd';
import moment from 'moment';
import Highlighter from 'react-highlight-words';
export default class RpoliceRecord extends Component {
 constructor(props) {
  super(props);
  this.state = {
   searchText: '',
  }
 }
 render() {
  // 添加搜索
  this.getColumnSearchProps = (dataIndex, title) => ({
   filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
    <div style={{ padding: 8 }}>
     <Input
      ref={node => {
       this.searchInput = node;
      }}
      placeholder={`搜索 ${title}`}
      value={selectedKeys[0]}
      onChange={e => setSelectedKeys(e.target.value "primary"
      onClick={() => this.handleSearch(selectedKeys, confirm)}
      icon="search"
      size="small"
      style={{ width: 90, marginRight: 8 }}>
      搜索
     </Button>
     <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>重置</Button>
    </div>
   ),
   filterIcon: filtered => (
    <Icon type="search" style={{ color: filtered "primary"
      onClick={() => this.handleSearchtime(moment(selectedKeys[0]._d).format('YYYY-MM-DD'), confirm)}
      icon="search"
      size="small"
      style={{ width: 90, marginRight: 8 }}>
      搜索
     </Button>
     <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>重置</Button>
    </div>
   ),
   filterIcon: filtered => (
    <Icon type="search" style={{ color: filtered "accidentTable" columns={columns} dataSource={data} bordered size="small" />
  )
 }
}

总结

以上所述是小编给大家介绍的antd通过 filterDropdown 自定义按某天时间搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

上一篇:人工智能开发语言排行榜: 不死Java, 不朽C/C++, 新贵Python【推荐】
下一篇:Github代码常用指令(小结)