我要评论vue element ui 列表排序去掉 null 排序方式（即数据的最开始展示的顺序），一行代码搞定
只保留 顺序，逆序（‘ascending’, ‘descending’）两种排序方式
<template >
<el-table class="hello"
:data="tableData"
:default-sort = "{prop: 'date', order: 'descending'}"
>
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:formatter="formatter">
</el-table-column>
</el-table>
</template>
<script>
export default {
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎7',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎5',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎6',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
formatter (row, column) {
return row.address
}
}
}
</script>
表格如下
首先需要自定义排序，官方的介绍如下
在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean ，默认为 false 。
可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。
如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。
在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。
于是加上
<el-table class="hello"
ref="table"
:data="tableData"
:default-sort = "{prop: 'date', order: 'descending'}"
@sort-change="sortAction"
>
methods: {
formatter (row, column) {
return row.address
},
sortAction ({ column, prop, order }) {
// order 分为 三种状态 null descending ascending
// 目的就是去掉 null 的状态
if (order !== null && this.prevProp !== prop) { // 不是上次点击的那一列
// 找到之前排序的列，去掉排序的 order 让样式消失
let prevColumn = this.$refs.table.columns.find(x => x.property === this.prevProp)
if (prevColumn) {
prevColumn.order = ''
}
// 记录当前新的排序列
this.columns = column
}
// 当点击到 null 排序状态时 并且不是新的列时
if (order === null) {
// 把上次排序的状态给它
column = this.columns
column.order = this.saveSort === 'descending' ? 'ascending' : 'descending'
}
this.prevProp = column.property
this.saveSort = column.order
console.log(column)
// 后端排序查询方法
// let columeProp = ''
// columeProp = column.property.replace(/([A-Z])/g, '_$1').toLowerCase()
// this.queryParam.prop = columeProp
// this.queryParam.order = column.order === 'descending' ? 'desc' : 'asc'
// this.getList(this.page, this.queryParam)
}
}
之前写了一堆代码来判断当状态为null时该如何处理，这样虽然也可以实现要求，但是当order值为null时重新赋值column.order，样式虽然改变了但是如果没有实现后台排序的话，数据还是会是最开始的顺序并不是我们想要。于是自己用console.log打印出 column 时发现了一个 column.sortOrders 属性，是一个数组，数组值就是三种状态。于是抱着试一下的心态，重新赋值发现就可以了
methods: {
formatter (row, column) {
return row.address
},
sortAction ({ column, prop, order }) {
// column.sortOrders 原本的属性是 三种状态 null descending ascending
// 重新赋值一下就好了，而且不实现后端排序也可以
column.sortOrders = ['ascending', 'descending']
}
}
重新赋值后，排序没有了 null 状态的排序，试了下排序就只有保留的两种方式了
试了下在el-table标签里面赋值是无效的
<el-table class="hello"
ref="table"
:data="tableData"
两种方式都无效
:sortOrders="['ascending', 'descending']"
:column.sortOrders="['ascending', 'descending']"
@sort-change="sortAction"
>
本文地址：https://blog.csdn.net/qq_43124955/article/details/107897618
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论