From 60e33f378218c51308497d2a725e80b985b3d889 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 9 Dec 2022 22:31:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20`@pureadmin/table`?=
 =?UTF-8?q?=20=E8=A1=A8=E6=A0=BC=E5=8A=A8=E6=80=81=E5=88=97=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pure-table/high/list.tsx         |  2 +-
 src/views/pure-table/high/page/columns.tsx | 23 +++++++++++---
 src/views/pure-table/high/page/index.vue   | 35 +++++++++++++++++++---
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/views/pure-table/high/list.tsx b/src/views/pure-table/high/list.tsx
index e7b7cfc60..f71f8691c 100644
--- a/src/views/pure-table/high/list.tsx
+++ b/src/views/pure-table/high/list.tsx
@@ -16,7 +16,7 @@ export const list = [
   {
     key: "page",
     content: rendContent("page"),
-    title: "分页、加载动画",
+    title: "分页、加载动画、动态列",
     component: Page
   },
   {
diff --git a/src/views/pure-table/high/page/columns.tsx b/src/views/pure-table/high/page/columns.tsx
index 5f9ded2da..f7a6ae6d0 100644
--- a/src/views/pure-table/high/page/columns.tsx
+++ b/src/views/pure-table/high/page/columns.tsx
@@ -6,19 +6,25 @@ import type { PaginationProps, LoadingConfig, Align } from "@pureadmin/table";
 export function useColumns() {
   const dataList = ref([]);
   const loading = ref(true);
+  const hideVal = ref("nohide");
+  const tableSize = ref("default");
+  const paginationSmall = ref(false);
   const paginationAlign = ref("right");
   const columns: TableColumnList = [
     {
       label: "日期",
-      prop: "date"
+      prop: "date",
+      hide: () => (hideVal.value === "hideDate" ? true : false)
     },
     {
       label: "姓名",
-      prop: "name"
+      prop: "name",
+      hide: () => (hideVal.value === "hideName" ? true : false)
     },
     {
       label: "地址",
-      prop: "address"
+      prop: "address",
+      hide: () => (hideVal.value === "hideAddress" ? true : false)
     }
   ];
 
@@ -29,7 +35,8 @@ export function useColumns() {
     pageSizes: [10, 15, 20],
     total: 0,
     align: "right",
-    background: true
+    background: true,
+    small: false
   });
 
   /** 加载动画配置 */
@@ -50,6 +57,10 @@ export function useColumns() {
     // background: rgba()
   });
 
+  function onChange(val) {
+    pagination.small = val;
+  }
+
   function onSizeChange(val) {
     console.log("onSizeChange", val);
   }
@@ -82,9 +93,13 @@ export function useColumns() {
     loading,
     columns,
     dataList,
+    hideVal,
+    tableSize,
     pagination,
     loadingConfig,
     paginationAlign,
+    paginationSmall,
+    onChange,
     onSizeChange,
     onCurrentChange
   };
diff --git a/src/views/pure-table/high/page/index.vue b/src/views/pure-table/high/page/index.vue
index b6429b2c3..56c7c8cd5 100644
--- a/src/views/pure-table/high/page/index.vue
+++ b/src/views/pure-table/high/page/index.vue
@@ -5,9 +5,13 @@ const {
   loading,
   columns,
   dataList,
+  hideVal,
+  tableSize,
   pagination,
   loadingConfig,
   paginationAlign,
+  paginationSmall,
+  onChange,
   onSizeChange,
   onCurrentChange
 } = useColumns();
@@ -15,22 +19,45 @@ const {
 
 <template>
   <div>
-    <el-space class="float-right mb-2">
-      <p>分页的对齐方式：</p>
-      <el-radio-group v-model="paginationAlign">
+    <el-space class="float-right mb-4">
+      <p class="text-sm">动态列：</p>
+      <el-radio-group v-model="hideVal" size="small">
+        <el-radio-button label="nohide">不隐藏</el-radio-button>
+        <el-radio-button label="hideDate">隐藏日期</el-radio-button>
+        <el-radio-button label="hideName">隐藏姓名</el-radio-button>
+        <el-radio-button label="hideAddress">隐藏地址</el-radio-button>
+      </el-radio-group>
+      <el-divider direction="vertical" />
+      <p class="text-sm">表格大小：</p>
+      <el-radio-group v-model="tableSize" size="small">
+        <el-radio-button label="large">large</el-radio-button>
+        <el-radio-button label="default">default</el-radio-button>
+        <el-radio-button label="small">small</el-radio-button>
+      </el-radio-group>
+      <el-divider direction="vertical" />
+      <p class="text-sm">分页大小：</p>
+      <el-radio-group v-model="paginationSmall" size="small" @change="onChange">
+        <el-radio-button :label="false">no small</el-radio-button>
+        <el-radio-button :label="true">small</el-radio-button>
+      </el-radio-group>
+      <el-divider direction="vertical" />
+      <p class="text-sm">分页的对齐方式：</p>
+      <el-radio-group v-model="paginationAlign" size="small">
         <el-radio-button label="right">right</el-radio-button>
         <el-radio-button label="center">center</el-radio-button>
         <el-radio-button label="left">left</el-radio-button>
       </el-radio-group>
     </el-space>
+
     <pure-table
       border
       row-key="id"
       alignWhole="center"
       showOverflowTooltip
+      :size="tableSize"
       :loading="loading"
       :loading-config="loadingConfig"
-      :height="440"
+      :height="tableSize === 'small' ? 352 : 440"
       :data="
         dataList.slice(
           (pagination.currentPage - 1) * pagination.pageSize,