vue element 一行代码去掉表格列表 null 排序方式，只保留顺序逆序排序

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