筛选
1、@filter-change 要写在table根元素，也就是<el-table @filter-change="filterChange"></el-table>
2、须要筛选的项，要写上 :column-key=" 'aaa' "
3、要搜寻全局，就要去掉对应筛选项的 :filter-method="xx"。
排序
1、首先有两个数组tData 和tableData。
2、tableData用来放当前页的数据，tData用来放所有数据。
3、为表格绑定@sort-change事件，当点击表头的排序icon时，调用sort_change办法,该办法外部调用的sortFun办法能够为tableData进行排序，showedData显示排好序的前四条数据。
<template> <div> <el-table :data="tableData | dataslice(page, pageSize)" @filter-change="filterChange" @sort-change="sortChange"> <el-table-column v-for="(item, index) in columns" :key="index" align="center" :fixed="item.fixed" :prop="item.prop" :label="item.label" :column-key="item.key" :min-width="item.width" :sortable="item.sortable" :show-overflow-tooltip="item.toolTip" :filters="item.filters ? Tfilters(item.prop) : null" /> <!-- filters：不须要筛选的项要设置为null，不然会报错 --> </el-table> <el-pagination :current-page="page" :page-sizes.sync="pagesizes" :page-size.sync="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" /> </div></template><script>export default { filters: { dataslice(array, page, limit) { const offset = (page - 1) * limit const newdata = offset + limit >= array.length ? array.slice(offset, array.length) : array.slice(offset, offset + limit) return newdata } }, data() { return { page: 1, pageSize: 10, total: 0, tableData: [], tData: [], // 申请到数据后tabledata和tData都要进行赋值 columns: [ { prop: 'a', label: '测试1', width: '120', fixed: true // 是否固定列 }, { prop: 'b', label: '测试2', width: '120', filters: true, // 是否筛选 key: 'b', // 全副数据进行筛选要设置column-key sortable: 'custom' // 全副数据排序要设置成custom }, { prop: 'c', label: '测试3', width: '120', filters: true, key: 'c', sortable: 'custom' }, { prop: 'd', label: '测试4', width: '120', filters: true, key: 'd', sortable: 'custom' } ], filtList: [] } }, computed: { /* 筛选的下拉选择项进行获取 */ Tfilters() { return (prop) => { let lis = [] const flis = [] this.tableData.forEach(item => { lis.push(item[prop]) }) lis = Array.from(new Set(lis)) lis.forEach(item => { const obj = {} obj.text = item obj.value = item flis.push(obj) }) return flis } } }, methods: { /* 全副数据排序 */ sort_change(column) { // column是个形参，具体查看element-ui文档 this.page = 1 // return to the first page after sorting this.total = this.tableData.length this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending')) }, sortFun(attr, rev) { // 第一个参数传入info里的prop示意排的是哪一列，第二个参数是升还是降排序 if (rev === undefined) { rev = 1 } else { rev = (rev) ? 1 : -1 } return function(a, b) { a = a[attr] b = b[attr] if (a < b) { return rev * -1 } if (a > b) { return rev * 1 } return 0 } }, /* 前端解决全副数据筛选 */ fliterChange(filters) { const lis = Object.values(filters)[0] const key = Object.keys(filters)[0] /* 将筛选条件增加到数组中 */ if (this.filtList.length === 0) { this.filtList.push(filters) } else { const index = this.filtList.findIndex((item) => key in item) if (index !== -1) { this.filtList.splice(index, 1, filters) } else { this.filtList.push(filters) } } /* 筛选按钮进行筛选 */ if (lis.length > 0) { this.tableData = this.tableData.filter(data => { return lis.includes(data[key]) }) this.total = this.tableData.length return this.tableData } /* 点击了重置按钮 */ this.tableData = this.tData // 先拿到所有的数据 // 把以后重置的数据过滤掉 this.filtList = this.filtList2.filter(item => Object.values(item)[0].length !== 0) // 如果数组中还有筛选条件，进一步进行筛选 if (this.filtList.length > 0) { this.filtList.forEach(item => { const lis = Object.values(item)[0] const key = Object.keys(item)[0] this.tableData = this.tableData.filter(data => { return lis.includes(data[key]) }) }) this.total = this.tableData.length return this.tableData } // 筛选数组中没有数据了，拿到全副数据 this.tableData = this.tData this.total = this.tableData.length return this.tableData } }}</script><style></style>