动手：表格筛选与排序

你要做什么

一个数据表格，支持按列排序、搜索过滤、分页。

⏱️ 20 分钟 | 🛠️ Vue 3

跟着做

帮我做一个数据表格组件（Vue 3），数据是用户列表：
1. 列：姓名、邮箱、角色、注册日期
2. 点击列头可以升序/降序排序，显示排序箭头
3. 顶部搜索框，输入时实时过滤所有列
4. 每页显示 5 条，底部有分页按钮
5. 20 条模拟数据，包含 admin/editor/viewer 三种角色
6. 角色列用不同颜色的标签显示
7. 样式简洁，参考 Ant Design 的表格风格

理解排序逻辑

const sorted = computed(() => 
  [...data].sort((a, b) => {
    if (sortDir === 'asc') return a[sortKey] > b[sortKey] ? 1 : -1;
    return a[sortKey] < b[sortKey] ? 1 : -1;
  })
);

排序就是比较两个值的大小，决定谁在前谁在后。

🎯 进阶挑战

• 加上多条件排序
• Excel 导出功能
• 数据从后端 API 分页加载

✅ 你做到了

• 掌握了表格排序、搜索、分页
• 理解了 computed 的数据处理
• 做了一个可以复用的表格组件