筛选
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>