chore: update `@pureadmin/table`

package.json

@@ -33,7 +33,7 @@
     "@logicflow/extension": "^1.1.16",
     "@pureadmin/components": "^1.0.6",
     "@pureadmin/descriptions": "^1.1.0",
-    "@pureadmin/table": "^0.0.1",
+    "@pureadmin/table": "^1.1.0",
     "@vueuse/core": "^8.7.4",
     "@vueuse/motion": "^2.0.0-beta.12",
     "@vueuse/shared": "^8.7.4",

pnpm-lock.yaml

@@ -20,7 +20,7 @@ specifiers:
   "@logicflow/extension": ^1.1.16
   "@pureadmin/components": ^1.0.6
   "@pureadmin/descriptions": ^1.1.0
-  "@pureadmin/table": ^0.0.1
+  "@pureadmin/table": ^1.1.0
   "@pureadmin/theme": ^2.4.0
   "@types/element-resize-detector": 1.1.3
   "@types/js-cookie": ^3.0.1
@@ -126,7 +126,7 @@ dependencies:
   "@logicflow/extension": 1.1.16
   "@pureadmin/components": 1.0.6_vue@3.2.37
   "@pureadmin/descriptions": 1.1.0
-  "@pureadmin/table": 0.0.1
+  "@pureadmin/table": 1.1.0
   "@vueuse/core": 8.7.4_vue@3.2.37
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.37
   "@vueuse/shared": 8.7.4_vue@3.2.37
@@ -1368,10 +1368,10 @@ packages:
       - "@vue/composition-api"
     dev: false
 
-  /@pureadmin/table/0.0.1:
+  /@pureadmin/table/1.1.0:
     resolution:
       {
-        integrity: sha512-1/4gHelsRtDMfOVjVhpMcHl3Q1i/OghuUG4bwKOOZdnbFaP08lcCpY4T0Xf16ZYmk6INas4fWcnHicl0Tu1/eg==
+        integrity: sha512-KZEUUSpBLz1yvOU8aijIpQNxgwD8bv1o64AQuqITDQ/JqUScVfPcGKupg8pwnxY53fNgt68xRK7nLyaWXvc4nA==
       }
     dependencies:
       element-plus: 2.2.6_vue@3.2.37

src/components/ReTable/src/bar.tsx

@@ -117,7 +117,7 @@ export default defineComponent({
       <>
         <div
           {...attrs}
-          class="w-99/100 mt-6 p-2 bg-white"
+          class="w-99/100 mt-6  pt-2 pl-2 pr-2 pb-1 bg-white"
           v-loading={props.loading}
           element-loading-svg={loadingSvg}
           element-loading-svg-view-box="-10, -10, 50, 50"

src/main.ts

@@ -8,9 +8,11 @@ import { useI18n } from "../src/plugins/i18n";
 import { MotionPlugin } from "@vueuse/motion";
 import VirtualScroller from "vue-virtual-scroller";
 import { useTable } from "../src/plugins/vxe-table";
-import PureDescriptions from "@pureadmin/descriptions";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
 
+import Table from "@pureadmin/table";
+import PureDescriptions from "@pureadmin/descriptions";
+
 import "uno.css";
 import "animate.css";
 // 引入重置样式
@@ -53,6 +55,7 @@ getServerConfig(app).then(async config => {
     .use(MotionPlugin)
     .use(useI18n)
     .use(ElementPlus)
+    .use(Table)
     .use(PureDescriptions)
     .use(useTable)
     .use(VirtualScroller);

src/views/system/dept/index.vue

@@ -3,7 +3,6 @@ import { useColumns } from "./columns";
 import { handleTree } from "/@/utils/tree";
 import { getDeptList } from "/@/api/system";
 import { FormInstance } from "element-plus";
-import { PureTable } from "@pureadmin/table";
 import { reactive, ref, onMounted } from "vue";
 import { TableProBar } from "/@/components/ReTable";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

src/views/system/role/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useColumns } from "./columns";
 import { getRoleList } from "/@/api/system";
-import { PureTable } from "@pureadmin/table";
 import { reactive, ref, onMounted } from "vue";
 import { type FormInstance } from "element-plus";
 import { TableProBar } from "/@/components/ReTable";
+import { type PaginationProps } from "@pureadmin/table";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 defineOptions({
@@ -18,13 +18,18 @@ const form = reactive({
 });
 
 let dataList = ref([]);
-let pageSize = ref(10);
-let totalPage = ref(0);
 let loading = ref(true);
 const { columns } = useColumns();
 
 const formRef = ref<FormInstance>();
 
+const pagination = reactive<PaginationProps>({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  background: true
+});
+
 function handleUpdate(row) {
   console.log(row);
 }
@@ -49,7 +54,7 @@ async function onSearch() {
   loading.value = true;
   let { data } = await getRoleList();
   dataList.value = data.list;
-  totalPage.value = data.total;
+  pagination.total = data.total;
   setTimeout(() => {
     loading.value = false;
   }, 500);
@@ -122,8 +127,12 @@ onMounted(() => {
           :data="dataList"
           :columns="columns"
           :checkList="checkList"
+          :pagination="pagination"
+          :paginationSmall="size === 'small' ? true : false"
           :header-cell-style="{ background: '#fafafa', color: '#606266' }"
           @selection-change="handleSelectionChange"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
         >
           <template #operation="{ row }">
             <el-button
@@ -188,17 +197,6 @@ onMounted(() => {
             </el-dropdown>
           </template>
         </PureTable>
-        <el-pagination
-          class="flex justify-end mt-4"
-          :small="size === 'small' ? true : false"
-          v-model:page-size="pageSize"
-          :page-sizes="[10, 20, 30, 50]"
-          :background="true"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="totalPage"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
       </template>
     </TableProBar>
   </div>

src/views/system/user/index.vue

@@ -2,10 +2,10 @@
 import tree from "./tree.vue";
 import { useColumns } from "./columns";
 import { getUserList } from "/@/api/system";
-import { PureTable } from "@pureadmin/table";
 import { reactive, ref, onMounted } from "vue";
-import { TableProBar } from "/@/components/ReTable";
 import { type FormInstance } from "element-plus";
+import { TableProBar } from "/@/components/ReTable";
+import { type PaginationProps } from "@pureadmin/table";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 defineOptions({
@@ -18,13 +18,18 @@ const form = reactive({
   status: ""
 });
 let dataList = ref([]);
-let pageSize = ref(10);
-let totalPage = ref(0);
 let loading = ref(true);
 const { columns } = useColumns();
 
 const formRef = ref<FormInstance>();
 
+const pagination = reactive<PaginationProps>({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  background: true
+});
+
 function handleUpdate(row) {
   console.log(row);
 }
@@ -49,7 +54,7 @@ async function onSearch() {
   loading.value = true;
   let { data } = await getUserList();
   dataList.value = data.list;
-  totalPage.value = data.total;
+  pagination.total = data.total;
   setTimeout(() => {
     loading.value = false;
   }, 500);
@@ -134,8 +139,12 @@ onMounted(() => {
             :data="dataList"
             :columns="columns"
             :checkList="checkList"
+            :pagination="pagination"
+            :paginationSmall="size === 'small' ? true : false"
             :header-cell-style="{ background: '#fafafa', color: '#606266' }"
             @selection-change="handleSelectionChange"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
           >
             <template #operation="{ row }">
               <el-button
@@ -200,17 +209,6 @@ onMounted(() => {
               </el-dropdown>
             </template>
           </PureTable>
-          <el-pagination
-            class="flex justify-end mt-4"
-            :small="size === 'small' ? true : false"
-            v-model:page-size="pageSize"
-            :page-sizes="[10, 20, 30, 50]"
-            :background="true"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="totalPage"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
         </template>
       </TableProBar>
     </div>

tsconfig.json

@@ -28,6 +28,7 @@
       "node",
       "vite/client",
       "element-plus/global",
+      "@pureadmin/table/volar",
       "unplugin-vue-define-options",
       "@pureadmin/descriptions/volar"
     ],