feat: 添加表格组件及模拟数据接口，支持分页和动态列渲染

src/views/Level/Menu2.vue

@@ -1,20 +1,125 @@
-<script setup lang="ts">
-import { ElInput } from 'element-plus'
+<script setup lang="tsx">
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
+import { Table, TableColumn } from '@/components/Table'
+import { getTableListApi } from '@/api/table'
+import { TableData } from '@/api/table/types'
 import { ref } from 'vue'
+import { ElTag, ElPagination } from 'element-plus'
+import { BaseButton } from '@/components/Button'
+import TableColumns from './modules/TableColumn'
 
-defineOptions({
-  name: 'Menu2'
-})
+interface Params {
+  pageIndex?: number
+  pageSize?: number
+}
 
 const { t } = useI18n()
 
-const text = ref('')
+const columns: TableColumn[] = [
+  ...TableColumns,
+  {
+    field: 'action',
+    label: '操作',
+    slots: {
+      default: (data) => {
+        return (
+          <div class="flex gap-2">
+            <BaseButton type="primary" onClick={() => actionFn(data)}>
+              操作
+            </BaseButton>
+            <BaseButton type="danger" onClick={() => handleDelete(data)}>
+              删除
+            </BaseButton>
+          </div>
+        )
+      }
+    }
+  }
+]
+
+const loading = ref(true)
+
+const tableDataList = ref<TableData[]>([])
+
+// 分页相关数据
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+const getTableList = async (params?: Params) => {
+  loading.value = true
+  const res = await getTableListApi(
+    params || {
+      pageIndex: currentPage.value,
+      pageSize: pageSize.value
+    }
+  )
+    .catch(() => {})
+    .finally(() => {
+      loading.value = false
+    })
+  if (res) {
+    tableDataList.value = res.data.list
+    total.value = res.data.total // 设置总数
+  }
+}
+
+// 分页方法
+const handleSizeChange = (val: number) => {
+  pageSize.value = val
+  getTableList()
+}
+
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val
+  getTableList()
+}
+
+// 初始加载
+getTableList()
+
+const actionFn = (data: any) => {
+  console.log(data)
+}
+
+// 添加删除方法
+const handleDelete = (data: any) => {
+  console.log('删除', data)
+}
 </script>
 
 <template>
-  <ContentWrap :title="t('levelDemo.menu')">
-    <div class="flex items-center"> Menu2: <ElInput v-model="text" class="pl-20px" /> </div>
+  <ContentWrap :title="t('tableDemo.table')" :message="t('tableDemo.tableDes')">
+    <div class="table-container">
+      <Table
+        :columns="columns"
+        :data="tableDataList"
+        :loading="loading"
+        :defaultSort="{ prop: 'display_time', order: 'descending' }"
+      />
+
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
   </ContentWrap>
 </template>
+
+<style lang="less" scoped>
+.table-container {
+  .pagination-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>