diff --git a/src/api/table.ts b/src/api/table.ts
new file mode 100644
index 0000000..17b8f28
--- /dev/null
+++ b/src/api/table.ts
@@ -0,0 +1,57 @@
+import { request } from "@/utils/service"
+
+interface ICreateTableDataApi {
+  username: string
+  password: string
+}
+
+interface IUpdateTableDataApi {
+  id: number
+  username: string
+  password?: string
+}
+
+interface IGetTableDataApi {
+  /** 当前页码 */
+  currentPage: number
+  /** 查询条数 */
+  size: number
+  /** 查询参数 */
+  username?: string
+  phone?: string
+}
+
+/** 增 */
+export function createTableDataApi(data: ICreateTableDataApi) {
+  return request({
+    url: "table",
+    method: "post",
+    data
+  })
+}
+
+/** 删 */
+export function deleteTableDataApi(id: number) {
+  return request({
+    url: `table/${id}`,
+    method: "delete"
+  })
+}
+
+/** 改 */
+export function updateTableDataApi(data: IUpdateTableDataApi) {
+  return request({
+    url: "table",
+    method: "put",
+    data
+  })
+}
+
+/** 查 */
+export function getTableDataApi(params: IGetTableDataApi) {
+  return request({
+    url: "table",
+    method: "get",
+    params
+  })
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 5b7d48f..78bfc88 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -87,6 +87,34 @@ export const constantRoutes: RouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: "/table",
+    component: Layout,
+    redirect: "/table/element-plus",
+    name: "Table",
+    meta: {
+      title: "表格",
+      elIcon: "Grid"
+    },
+    children: [
+      {
+        path: "element-plus",
+        component: () => import("@/views/table/element-plus/index.vue"),
+        name: "ElementPlus",
+        meta: {
+          title: "element-plus"
+        }
+      },
+      {
+        path: "vxe-table",
+        component: () => import("@/views/table/vxe-table/index.vue"),
+        name: "VxeTable",
+        meta: {
+          title: "vxe-table"
+        }
+      }
+    ]
+  },
   {
     path: "/menu",
     component: Layout,
diff --git a/src/views/table/element-plus/index.vue b/src/views/table/element-plus/index.vue
new file mode 100644
index 0000000..22d6413
--- /dev/null
+++ b/src/views/table/element-plus/index.vue
@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import { reactive, ref } from "vue"
+import { createTableDataApi, deleteTableDataApi, updateTableDataApi, getTableDataApi } from "@/api/table"
+import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus"
+import { Search, Refresh, CirclePlus, Delete, Download, RefreshRight } from "@element-plus/icons-vue"
+
+const loading = ref<boolean>(false)
+
+//#region 增
+const dialogVisible = ref<boolean>(false)
+const formRef = ref<FormInstance | null>(null)
+const formData = reactive({
+  username: "",
+  password: ""
+})
+const formRules: FormRules = reactive({
+  username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
+  password: [{ required: true, trigger: "blur", message: "请输入密码" }]
+})
+const handleCreate = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      if (currentUpdateId.value === undefined) {
+        createTableDataApi({
+          username: formData.username,
+          password: formData.password
+        }).then(() => {
+          ElMessage.success("新增成功")
+          dialogVisible.value = false
+          getTableData()
+        })
+      } else {
+        updateTableDataApi({
+          id: currentUpdateId.value,
+          username: formData.username
+        }).then(() => {
+          ElMessage.success("修改成功")
+          dialogVisible.value = false
+          getTableData()
+        })
+      }
+    } else {
+      return false
+    }
+  })
+}
+const resetForm = () => {
+  currentUpdateId.value = undefined
+  formData.username = ""
+  formData.password = ""
+}
+//#endregion
+
+//#region 删
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`正在删除用户：${row.username}，确认删除？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(() => {
+    deleteTableDataApi(row.id).then(() => {
+      ElMessage.success("删除成功")
+      getTableData()
+    })
+  })
+}
+//#endregion
+
+//#region 改
+const currentUpdateId = ref<undefined | number>(undefined)
+const handleUpdate = (row: any) => {
+  currentUpdateId.value = row.id
+  formData.username = row.username
+  formData.password = row.password
+  dialogVisible.value = true
+}
+//#endregion
+
+//#region 查
+const tableData = ref<any[]>([])
+const searchFormRef = ref<FormInstance | null>(null)
+const searchData = reactive({
+  username: "",
+  phone: ""
+})
+const paginationData = reactive({
+  total: 0,
+  currentPage: 1,
+  size: 10
+})
+const getTableData = () => {
+  loading.value = true
+  getTableDataApi({
+    currentPage: paginationData.currentPage,
+    size: paginationData.size,
+    username: searchData.username === "" ? undefined : searchData.username,
+    phone: searchData.phone === "" ? undefined : searchData.phone
+  })
+    .then((res: any) => {
+      paginationData.total = res.data.total
+      tableData.value = res.data.list
+    })
+    .catch(() => {
+      tableData.value = []
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+const handleSizeChange = (value: number) => {
+  paginationData.size = value
+  getTableData()
+}
+const handleCurrentChange = (value: number) => {
+  paginationData.currentPage = value
+  getTableData()
+}
+const handleSearch = () => {
+  paginationData.currentPage = 1
+  getTableData()
+}
+const resetSearch = () => {
+  searchFormRef.value?.resetFields()
+  paginationData.currentPage = 1
+  getTableData()
+}
+const handRefresh = () => {
+  getTableData()
+}
+//#endregion
+
+getTableData()
+</script>
+
+<template>
+  <div class="app-container">
+    <el-card v-loading="loading" shadow="never" class="search-wrapper">
+      <el-form ref="searchFormRef" :inline="true" :model="searchData">
+        <el-form-item prop="username" label="用户名">
+          <el-input v-model="searchData.username" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="phone" label="手机号">
+          <el-input v-model="searchData.phone" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
+          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card v-loading="loading" shadow="never">
+      <div class="toolbar-wrapper">
+        <div>
+          <el-button type="primary" :icon="CirclePlus" @click="dialogVisible = true">新增用户</el-button>
+          <el-button type="danger" :icon="Delete">批量删除</el-button>
+        </div>
+        <div>
+          <el-tooltip content="下载" effect="light">
+            <el-button type="primary" :icon="Download" circle />
+          </el-tooltip>
+          <el-tooltip content="刷新表格" effect="light">
+            <el-button type="primary" :icon="RefreshRight" circle @click="handRefresh" />
+          </el-tooltip>
+        </div>
+      </div>
+      <div class="table-wrapper">
+        <el-table :data="tableData" header-cell-class-name="table-header">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column prop="username" label="用户名" align="center" />
+          <el-table-column prop="roles" label="角色" align="center">
+            <template #default="scope">
+              <el-tag v-if="scope.row.roles === 'admin'" effect="plain">admin</el-tag>
+              <el-tag v-else type="warning" effect="plain">{{ scope.row.roles }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="phone" label="手机号" align="center" />
+          <el-table-column prop="email" label="邮箱" align="center" />
+          <el-table-column prop="status" label="状态" align="center">
+            <template #default="scope">
+              <el-tag v-if="scope.row.status" type="success" effect="plain">启用</el-tag>
+              <el-tag v-else type="danger" effect="plain">禁用</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="creatTime" label="创建时间" align="center" />
+          <el-table-column fixed="right" label="操作" width="150" align="center">
+            <template #default="scope">
+              <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pager-wrapper">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :page-sizes="[10, 20, 50]"
+          :total="paginationData.total"
+          :page-size="paginationData.size"
+          :currentPage="paginationData.currentPage"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+    <!-- 新增/编辑 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="currentUpdateId === undefined ? '新增用户' : '修改服用户'"
+      @close="resetForm"
+    >
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
+        <el-form-item prop="username" label="用户名">
+          <el-input v-model="formData.username" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item prop="password" label="密码">
+          <el-input v-model="formData.password" placeholder="请输入" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleCreate">确认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.search-wrapper {
+  margin-bottom: 20px;
+  :deep(.el-card__body) {
+    padding-bottom: 2px;
+  }
+}
+
+.toolbar-wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.table-wrapper {
+  margin-bottom: 20px;
+  :deep(.table-header) {
+    background-color: var(--el-fill-color-light) !important;
+  }
+}
+
+.pager-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/table/vxe-table/index.vue b/src/views/table/vxe-table/index.vue
new file mode 100644
index 0000000..88505c8
--- /dev/null
+++ b/src/views/table/vxe-table/index.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="app-container">欢迎 PR !!!</div>
+</template>
+
+<style lang="scss" scoped></style>