uni-app 手机端数据报表组件需求 包括排序筛选等功能

针对您提出的uni-app手机端数据报表组件需求，包含排序和筛选功能，以下是一个简单的实现示例。此示例基于Vue.js和uni-app框架，通过模拟一个数据表格组件来展示排序和筛选功能。

数据报表组件代码示例

1. 组件模板 (template)

<template>
  <view>
    <!-- 筛选条件 -->
    <view>
      <picker mode="selector" :range="filters.status" v-model="selectedStatus">
        <view class="picker">
          筛选状态: {{ filters.status[selectedStatus] }}
        </view>
      </picker>
    </view>

    <!-- 数据表格 -->
    <table>
      <thead>
        <tr>
          <th @click="sort('name')">名称</th>
          <th @click="sort('value')">数值</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.value }}</td>
          <td>{{ item.status }}</td>
        </tr>
      </tbody>
    </table>
  </view>
</template>

2. 组件脚本 (script)

<script>
export default {
  data() {
    return {
      data: [
        // 模拟数据
        { id: 1, name: 'Item 1', value: 10, status: 'Active' },
        { id: 2, name: 'Item 2', value: 20, status: 'Inactive' },
        // 更多数据...
      ],
      filters: {
        status: ['All', 'Active', 'Inactive']
      },
      selectedStatus: 0, // 默认选择所有
      sortOrder: {
        key: 'name',
        asc: true
      }
    };
  },
  computed: {
    filteredData() {
      let data = this.data;
      if (this.selectedStatus !== 0) {
        data = data.filter(item => item.status === this.filters.status[this.selectedStatus]);
      }
      return data.sort((a, b) => {
        let modifier = this.sortOrder.asc ? 1 : -1;
        if (a[this.sortOrder.key] < b[this.sortOrder.key]) return -1 * modifier;
        if (a[this.sortOrder.key] > b[this.sortOrder.key]) return 1 * modifier;
        return 0;
      });
    }
  },
  methods: {
    sort(key) {
      if (this.sortOrder.key === key) {
        this.sortOrder.asc = !this.sortOrder.asc;
      } else {
        this.sortOrder.key = key;
        this.sortOrder.asc = true;
      }
    }
  }
};
</script>

关键点说明

• 筛选功能：通过picker组件实现状态筛选，用户选择不同的状态后，数据会实时更新。
• 排序功能：通过点击表头触发sort方法，根据点击的列进行排序，并切换升序/降序。
• 数据绑定：使用Vue的computed属性计算filteredData，结合筛选和排序逻辑，确保显示的数据是实时且正确的。

这个示例展示了如何在uni-app中实现基本的排序和筛选功能，您可以根据实际需求进一步扩展和优化。