uni-app 表头排序类似datagrid的插件

在 uni-app 中实现类似 datagrid 的表头排序功能，你可以使用 uView UI 框架中的 u-table 组件，它提供了较为完善的表格功能，包括表头排序。如果你不想使用第三方框架，也可以自己实现一个简单的排序功能。下面是一个使用原生 uni-app 实现的示例代码。

1. 创建数据模型

首先，定义你的数据模型和一个初始数据数组：

data() {
    return {
        columns: [
            { key: 'name', label: 'Name', sortable: true },
            { key: 'age', label: 'Age', sortable: true },
            { key: 'address', label: 'Address', sortable: false }
        ],
        data: [
            { name: 'John', age: 25, address: 'New York' },
            { name: 'Jane', age: 30, address: 'London' },
            { name: 'Mike', age: 22, address: 'Chicago' }
        ],
        sortKey: '',
        sortOrder: 'asc'
    };
}

2. 创建表格组件

在模板中，创建一个简单的表格组件，并为表头添加点击事件以实现排序：

<template>
    <view>
        <view class="table-header">
            <view 
                v-for="column in columns" 
                :key="column.key" 
                class="table-header-cell" 
                @click="onHeaderClick(column.key)"
            >
                {{ column.label }}
                <text v-if="column.sortable && sortKey === column.key">
                    {{ sortOrder === 'asc' ? '↑' : '↓' }}
                </text>
            </view>
        </view>
        <view class="table-body">
            <view v-for="(row, index) in sortedData" :key="index" class="table-row">
                <view v-for="column in columns" :key="column.key" class="table-cell">
                    {{ row[column.key] }}
                </view>
            </view>
        </view>
    </view>
</template>

3. 实现排序逻辑

在方法中添加排序逻辑：

methods: {
    onHeaderClick(key) {
        if (this.sortKey === key) {
            this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
        } else {
            this.sortKey = key;
            this.sortOrder = 'asc';
        }
    },
    getSortedData() {
        if (!this.sortKey) return this.data;
        return this.data.slice().sort((a, b) => {
            let modifier = this.sortOrder === 'asc' ? 1 : -1;
            if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier;
            if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier;
            return 0;
        });
    },
    computed: {
        sortedData() {
            return this.getSortedData();
        }
    }
}

4. 样式

添加一些基本的样式来美化表格：

<style scoped>
.table-header {
    display: flex;
    background-color: #f5f5f5;
}
.table-header-cell {
    flex: 1;
    padding: 10px;
    text-align: left;
    cursor: pointer;
}
.table-body {
    margin-top: 10px;
}
.table-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.table-cell {
    flex: 1;
    padding: 10px;
}
</style>

这个示例展示了如何在 uni-app 中实现一个简单的表头排序功能，你可以根据需求进行扩展和优化。