vue3 表格 筛选 排序列表

在 Vue3 中，表格的筛选和排序功能通常通过组件化和指令结合数据绑定来实现。以下是基本步骤：

1. 定义表格组件 (Table.vue)：使用 `v-model` 指令绑定数据源（可以是数组），并为每一列创建 `<th>` 元素，其中包含 `@click` 事件处理函数，用于触发列头点击事件（筛选或排序）。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(column, index) in columns" :key="index" @click="sort(column)">
          {{ column.label }}
          <!-- 添加筛选图标等 -->
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in filteredItems">
        <td>{{ item[column.key] }}</td> <!-- column.key 获取对应索引的数据 -->
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 数据源
      columns: [], // 列配置
      currentSort: {}, // 当前排序规则
    };
  },
  methods: {
    sort(column) {
      if (!this.currentSort || this.currentSort.field !== column.key) {
        this.currentSort = { field: column.key, order: 'asc' }; // 默认升序
      } else {
        this.currentSort.order = this.currentSort.order === 'asc' ? 'desc' : 'asc'; // 交换排序方向
      }
      this.filteredItems = this.items.sort((a, b) => {
        const valueA = a[column.key];
        const valueB = b[column.key];

        // 实现具体的比较逻辑
        // ...
      });
    },
    filter(items, column, value) {
      // 根据当前列名和值过滤数据
      // 这里仅示例，实际实现依据需求
      this.filteredItems = items.filter(item => item[column.key].includes(value));
    },
  },
};
</script>

2. 使用动态列头和数据过滤：在表头单元格上添加 `v-if` 条件判断，根据列的 `filterable` 属性动态显示筛选按钮。当用户输入筛选条件时，调用相应的过滤方法（如 `filter`）更新 `filteredItems`。

3. 提供搜索框和下拉框等交互元素，让用户选择筛选条件和排序方式。