element table 过滤器_element Table 实现筛选功能

业务中table中需要筛选数据的功能,要求在表头里实现一个下拉框进行筛选。

首先, Element-ui 的官方文档介绍,在列中设置filters filter-method属性即可开启该列的筛选,filters 是一个数组,filter-method是一个方法,它用于决定某些数据是否显示,会传入三个参数:value, row 和 column。但是filter-method 是数据过滤的方法,但是只支持已有数据的筛选,不支持后台排序。通过阅读官方文档,我们可以利用 filter-change 事件来实现。filter-change 会返回一个参数,key:column 的 columnKey,可以用Object.keys()获取key值,然后判断是那一列进行了筛选操作(多列筛选时用到),value:就是筛选的条件。

清除日期过滤器

清除所有过滤器

ref="filterTable"

:data="tableData"

style="width: 100%">

prop="date"

label="日期"

sortable

width="180"

column-key="date"

:filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element表格(el-table)中使用Vue的过滤器filters,可以对表格中的数据进行格式化或者筛选。 首先,在Vue实例中定义自己的过滤器。例如: ``` filters: { // 将数字保留两位小数 toFixed2(value) { return Number(value).toFixed(2); }, // 将日期进行格式化 formatDate(value) { const date = new Date(value); const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); return `${year}-${month}-${day}`; } } ``` 然后,在Element表格(el-table)的列定义中使用filters属性来指定使用哪个过滤器。例如: ``` <el-table-column prop="price" label="价格" :filters="[{ text: '保留两位小数', value: 'toFixed2' }]" :filter-method="filterMethod" :filtered-value="filteredPrice"></el-table-column> <el-table-column prop="date" label="日期" :filters="[{ text: '格式化日期', value: 'formatDate' }]" :filter-method="filterMethod" :filtered-value="filteredDate"></el-table-column> ``` 其中,filters属性的值是一个数组,数组中每个元素都是一个对象,text属性表示过滤器的名称,value属性表示过滤器的名称,即定义的自定义过滤器的名称。 最后,在Vue实例中定义filterMethod方法来实现过滤器的实际功能。例如: ``` methods: { filterMethod(value, filters) { const filter = filters[0]; const key = filter.value; if (key === 'toFixed2') { return value.toFixed(2); } else if (key === 'formatDate') { const date = new Date(value); const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); return `${year}-${month}-${day}`; } } } ``` 其中,value表示当前列的值,filters表示当前过滤器的配置列表,filterMethod方法根据value和filters来实现实际的过滤器功能。 最后,使用filtered-value属性来指定当前列的过滤器值,用于筛选表格数据。例如: ``` data() { return { filteredPrice: ['toFixed2'], filteredDate: ['formatDate'] } } ``` 以上就是在Element表格(el-table)中使用Vue的过滤器filters的具体步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值