表格组件代码示例 - 组件库文档

📌 组件路径：/components-library/table/usage
🔍 代码语言：TypeScript + Vue 3

基础用法

<template>
  <div>
    <table-component :data="tableData" :columns="columns" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TableComponent from '/components-library/table/usage';

const tableData = ref([
  { id: 1, name: '张三', age: 28 },
  { id: 2, name: '李四', age: 32 }
]);

const columns = ref([
  { key: 'id', label: 'ID' },
  { key: 'name', label: '姓名' },
  { key: 'age', label: '年龄' }
]);
</script>

高级功能

🔧 支持分页：
🔗 查看完整分页实现：/components-library/table/pagination

🔧 支持筛选：
🔗 分页筛选配置文档：/components-library/table/filter

🔧 自定义样式：
🔗 样式指南：/components-library/table/styling

代码规范

• 使用 @/components 目录结构
• 遵循 Vue 3 Composition API 规范
• 数据类型建议使用 TypeScript 接口定义

扩展阅读

📚 组件库核心概念
📘 表格组件API文档
🛠 自定义组件开发指南

注意：实际开发中请根据业务需求调整列配置和数据格式 🛠️