共计 3248 个字符,预计需要花费 9 分钟才能阅读完成。
筛选
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>
正文完