ant 表格自定义表头和表格筛选

1、ant 自动表格筛选组件

对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple用于指定多选和单选。
表头设置如下，实现了当前数据的筛选，如果需要查询接口进行数据筛选，而不是当前页的数据筛选，可以监听表格的onchange事件，在参数filters中，可以拿到变化的属性，进行数据的重新渲染。

{title: 'Address',dataIndex: 'address',filters: [{text: 'London',value: 'London',}, {text: 'New York',value: 'New York',}],filterMultiple: false,onFilter: (value, record) => record.address.indexOf(value) === 0,}function onChange(pagination, filters, sorter) {console.log('params', pagination, filters, sorter);
}

2、在表头中嵌入下拉选择框

API中，声明，title支持一个函数返回，所以，我们在函数中自定义返回内容即可，一下已下拉框为例

{title: this.downSelect(),dataIndex: 'status',key: 'status',render: (text, record) => {  switch(text){case 1:return "进行中";case 2:return "已成交";case 3:return "失败"}} }downSelect = (currentPageData)=>{return(<Select defaultValue="none" style={{ width: 120 }} onChange={this.handleChange}><Option value="none">状态(全部)</Option><Option value="1">进行中</Option><Option value="2">已提交</Option><Option value="3">失败</Option></Select>)}handleChange = (value)=>{this.setState({status:value},()=>{this.doFetch(); //更改状态后，重新请求数据。})}

ant 表格自定义表头和表格筛选相关推荐

elementui 表格表头竖着显示_ElementUI中table表格自定义表头Tooltip文字提示
picture table-header-tips 应用 element 中的 table 组件,自定义表头 Tooltip 文字提示. 效果图效果图示例 demo 代码引用 element-u ...
bootstrap表格自定义表头
bootstrap框架的好处是有很多的现成的样式可以直接使用, 比如做后台管理系统,每个页面都少不了列表查询,可以说每个页面都是在类似的重复.增删改查的列表查询很简单,按照固定的模式按部就班, 说白了 ...
html生成自定义表格,自定义js的表格插件
场景:指定元素,生成自定义表格. 目的:了解js的插件开发. html代码: 自定义表格插件 var test = new MyTable({ elid:"mytable",//定 ...
jQuery Treegrid自定义表头（全网独家）附带源码
背景业务原因需要定制一些复杂的的表头, 在网上没有找到类似的教程. 但是突然灵机一动,想到了个曲线救国的解决方案. 直接看效果图初始化表格初始化的方法跟原本的方法没有什么区别, 但是需要注意的是 ...
element-ui表格实现表头快速筛选
个人感觉这个功能是比较好用,而且项目中极可能用得到的.记录一下踩过的坑. 首先,产品要求能直接在表头进行快速筛选,饿了么的表格筛选又满足不了需求 filter-method这个方法获取到的参数值,会拿 ...
iview的表格自定义_iview table组件自定义表头
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格表头中填加按钮,下拉菜单,图标等等,在网上搜了一段时间发现比较少,所以写好之后就想着分享出来给有需要的人参考参考,例如下面这种表头带图标的: ...
elementui表格如何自定义表头内容，让表头变得更美观
举例说明:(初始效果) <el-table-column label="是否已完成" align="center" width="70" ...
iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结数据渲染相关正常渲染直接从教程中拿出来的组件代码: columns中填写的数据必须是一个数组,代表的是表头相关,常 ...
el-table表格在表头和数据行添加图标、处理数据
通过header插槽自定义表头: <template slot="header" slot-scope="scope">... </templ ...

ant 表格自定义表头和表格筛选

ant 表格自定义表头和表格筛选相关推荐

最新文章

热门文章