【vue】vue-easytable实现字段排序功能

vue-easytable是一款基于vue的简单表格插件

• GitHub：https://github.com/huangshuwei/vue-easytable

• 文档：http://doc.huangsw.com/vue-easytable/app.html#/intro

排序有两种实现方式，一种是前端通过比较字段大小实现，一种是通过请求后台数据接口直接返回排序好的数据，这里采用的是第一种方式，即前端排序。

给<v-table>添加三个标签

• :multiple-sort="false" 为 true 将开启多个字段进行排序，这个只需要单个字段进行排序即可
• :sort-always="true" 允许排序只在升序和降序切换，如果设置成“false”，还有第三种即恢复排序前的原始状态
• @sort-change="sortChange" 回调函数，获取当前排序的字段，将排序结果重新赋值table-data达到排序的目的

<v-table
    is-horizontal-resize is-vertical-resize :vertical-resize-offset='60'
    style="width:100%;margin-bottom: 10px;"
    :columns="columns" :table-data="tableData"
    row-hover-color="#eee" row-click-color="#edf7ff"
    title-bg-color="#F8E7E4" even-bg-color="#f2f2f2"
    :multiple-sort="false" :sort-always="true" @sort-change="sortChange"
></v-table>

columns里给需要排序的字段添加orderBy标签，正序-'asc' 倒序-'desc'，这个一定要加上，不然字段无法响应排序。

     columns: [ 
          {
            field: 'premium', // 保费
            title: '保费',
            width: 100,
            titleAlign: 'center',
            columnAlign: 'center',
            isResize: true,
            orderBy: 'desc'
          },
          {
            field: 'end_date', // 到期时间
            title: '到期时间',
            width: 100,
            titleAlign: 'center',
            columnAlign: 'center',
            isResize: true,
            orderBy: 'desc'
          }
        ]

@sort-change回调函数

#1 -> 数值型字段

if (params.premium === 'desc') {
    return b.premium - a.premium
} else if (params.premium === 'asc') {
    return a.premium - b.premium
} else {
    return 0
}

#2 -> 日期型字段

if (params.end_date === 'desc') {
    return Date.parse(b.end_date) - Date.parse(a.end_date)
} else if (params.end_date === 'asc') {
    return Date.parse(a.end_date) - Date.parse(b.end_date)
} else {
    return 0
}

完整的sortChange

sortChange (params) {
    console.log(params)
    // 保费排序
    if (params.premium.length > 0) {
        this.tableData.sort(function (a, b) {
            if (params.premium === 'desc') {
                return b.premium - a.premium
            } else if (params.premium === 'asc') {
                return a.premium - b.premium
            } else {
                return 0
            }
        })
    }
    // 日期排序
    if (params.end_date.length > 0) {
        this.tableData.sort(function (a, b) {
            if (params.end_date === 'desc') {
              return Date.parse(b.end_date) - Date.parse(a.end_date)
            } else if (params.end_date === 'asc') {
              return Date.parse(a.end_date) - Date.parse(b.end_date)
            } else {
              return 0
            }
        })
    }
}

参考：

http://doc.huangsw.com/vue-easytable/app.html#/table/sort

https://blog.csdn.net/weixin_45690832/article/details/105839260