element-ui中表格自定義排序

目錄

1. 功能描述
2. 代碼實現
3. 最終效果

一、功能描述

• 實現： 對於一次性拉取所有數據、前端來做分頁的表格使用場景，使用el-table-column自帶的sortable只能對當前頁數據進行排序，這里簡單實現el-table的自定義排序，排序完成后再做分頁即可（本文省略）。
• 版本： "element-ui": "^2.3.7"。

二、代碼實現

1. el-table上監聽sort-change事件；
2. el-table-column上sortable屬性設置為custom；
3. el-table-column上sort-orders屬性設置為['ascending','descending']。（默認取值為['ascending','descending',null]）

<template>
    <el-table
        :data="tableData"
        stripe
        style="width: 50%;margin: 0 auto;"
        @sort-change="onSortChange">
        <el-table-column
            prop="date"
            label="日期"
            width="180"
            sortable="custom"
            :sort-orders="['ascending','descending']">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
        <el-table-column
            prop="sort"
            label="排序"
            sortable="custom"
            :sort-orders="['ascending','descending']">
        </el-table-column>
    </el-table>
</template>

<script>
  export default {
    data() {
        return {
            tableData: [{
                date: '2014-12-02',
                name: '張帥',
                address: '南京市秦淮區秦虹路98號',
                sort: 100,
            }, {
                date: '2016-06-04',
                name: '王帥',
                address: '北京市朝陽區東三環北路甲26號',
                sort: 15,
            }, {
                date: '2012-03-01',
                name: '劉帥',
                address: '上海市浦東新區濰坊西路與浦城路交叉路口往西北約50米',
                sort: 8
            }, {
                date: '2018-11-03',
                name: '孟帥',
                address: '湖北省武漢市硚口區解放大道586號',
                sort: 1
            }]
        }
    },
    methods: {
        /**
         * 表格排序事件處理函數
         * @param {object} {column,prop,order} 列數據|排序字段|排序方式
         */
        onSortChange({ prop, order }) {
            this.tableData.sort(this.compare(prop,order));
        },

        /**
         * 排序比較
         * @param {string} propertyName 排序的屬性名
         * @param {string} sort ascending(升序)/descending(降序)
         * @return {function}
         */
        compare (propertyName, sort) {
            return function (obj1, obj2) {
                var value1 = obj1[propertyName]
                var value2 = obj2[propertyName]
                if (typeof value1 === 'string' && typeof value2 === 'string') {
                    const res = value1.localeCompare(value2, 'zh')
                    return sort === 'ascending' ? res : -res
                } else {
                    if (value1 <= value2) {
                        return sort === 'ascending' ? -1 : 1
                    } else if (value1 > value2) {
                        return sort === 'ascending' ? 1 : -1
                    }
                }
            }
        }
    },
  }
</script>

<style lang="scss" scoped>

</style>

三、最終效果

demo地址