element ui el-table展示列表，结合分页+过滤功能-编程知识

vue+element-ui实现的列表展示，列表分页，列表筛选功能

1，分页器

el-table模块下面是分页器代码 <el-pagination></el-pagination>

<el-table></el-table>
<!-- 分页器 --><div class="block" style="margin-top:15px;margin-left:60%" v-if="tableData"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10,20,30,40,50,100]":page-size=10layout="total, prev, pager, next,jumper":total="tableData.length"></el-pagination></div>

分页器 layout 属性表示组件布局

设置layout，表示分页器需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示显示页码总数，size用于设置每页显示的页码数量。

size-change 表示处理页码大小

current-change表示页面变动时触发的事件

page-sizes接受整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。

current-change 表示当前页，接受一个初始值表示首页在第几页。

page-size 表示每页item个数

total表示总体item数，例子代码中赋值为tableData的长度

2，过滤器

过滤功能

在<el-table-column>中设置filters,filter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column

用例代码：

<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"sortablewidth="180":filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]":filter-method="filterHandler"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址":formatter="formatter"></el-table-column><el-table-columnprop="tag"label="标签"width="100":filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]":filter-method="filterTag"filter-placement="bottom-end"><template slot-scope="scope"><el-tag:type="scope.row.tag === '家' ? 'primary' : 'success'"disable-transitions>{{scope.row.tag}}</el-tag></template></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',tag: '家'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',tag: '公司'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',tag: '家'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',tag: '公司'}]}},methods: {formatter(row, column) {return row.address;},filterTag(value, row) {return row.tag === value;},filterHandler(value, row, column) {const property = column['property'];return row[property] === value;}}}
</script>

filters是数组形式，元素是object类型，包括text属性和value属性。text属性时过滤下拉后让选择的选项，选择后使用相应的value值去匹配。匹配的方法是filter-method。

筛选后，每行数据 row都会进行filter-method的判断。

filterHandler分析

filterHandler(value, row, column) {const property = column['property'];return row[property] === value;}

column['property']是当前列的prop属性值，比如如下代码，该column['property']是module。不设置该属性column['property']就是undefined，自然也无法选择出想要的数据。

  <el-table-columnprop="module":filters= "headFilters['module']":filter-method="filterHandler"label="模块"min-width="3%"> </el-table-column>

一般的比较都是return row[property] === value;即每行的module属性值与选中的filter item的value值相等选中。

3，结合使用遇到的问题

问题一：如何实现，点击新的页码或者下一页，table数据变化为相应的数据

el-table组件和el-pagination组件其实是两个分开的组件。

他们的联系是通过tableData来进行的。分页组件其实是产生了很多属性及其值，比如当前页currentPage,pageSize当前页的展示数据量pageSize。所以，el-table的“：data”属性就是计算后的分页段的数据：

<el-table v-if="tableData" :key="fresh_table" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"

问题二：加上过滤功能后，如何使得分页正常工作

以上<el-pagination>和过滤器的设置，是不是就能正常工作了呢？会存在一个问题，比如一个列表，分页每页10条数据，然后筛选。第一页10条数据，符合筛选规则5条，会呈现5条数据。第二页10条数据有3条符合规则，会在第三页展示3条数据。就是筛选只在每页筛选，分页器的总条数还是筛选前的总数据条数。如何改变呢？

el-table 有filter-change属性

filter-change 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 filters

可以利用该参数，进行一个table的数据再计算。就是 <el-table v-if="tableData" :key="fresh_table" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" 的tableData是过滤后的结果。

可以这样实现：

el-table定义filter-change:

            <el-table v-if="tableData" :key="fresh_table" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" @filter-change="handleFilterChange" width="100%">

handleFilterChange实现：

handleFilterChange(value){if (!this.filterValue) {// 如果用户没有选择任何筛选条件，直接返回原始表格数据this.tableData=this.issues_detail;}// 使用 filter 方法过滤表格数据this.tableData=this.issues_detail.filter((row) => row[this.filterKey] === this.filterValue);this.fresh_table=!this.fresh_table},

其中变量 filterValue, filterKey，即fresh_table是定义在vue data对象中的变量：

  var history = new Vue({el: "#ss",data: {....filterValue:null,filterKey:null,fresh_table:true,tableData:null,.....},

filterValue, filterKey记录过滤的key-vlaue值，在filterHandler中赋值。

<el-table>
....<el-table-columnprop="module":filters= "headFilters['module']":filter-method="filterHandler"label="模块"min-width="3%"> </el-table-column>
.....
</el-table>.....
//位于vue的method中定义filterHandler(value, row, column) {const property = column['property'];this.filterValue=valuethis.filterKey=propertyreturn row[property] === value;},

以上fresh_table的使用，结合:key="fresh_table" ，筛选完后改变其值使得列表更新，使用筛选后的tableData进行列表渲染

<el-table v-if="tableData" :key="fresh_table" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" @filter-change="handleFilterChange" width="100%">

以上基本就能实现分页+筛选列表功能，筛选后总体数量会变为符合筛选条件的数量，筛选结果分页。