feat: 添加 @pureadmin/table 表格动态列示例

src/views/pure-table/high/list.tsx

@@ -16,7 +16,7 @@ export const list = [
   {
     key: "page",
     content: rendContent("page"),
-    title: "分页、加载动画",
+    title: "分页、加载动画、动态列",
     component: Page
   },
   {

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
   };

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,