feat: 优化 PureTableBar 组件，添加列展示功能

2025-06-04 07:27:41 +08:00 · 2023-05-09 14:33:19 +08:00 · 2023-05-09 14:33:19 +08:00 · 723cb46eaf
commit 723cb46eaf
parent 42f5a36145
12 changed files with 137 additions and 59 deletions
--- a/.github/workflows/gitee.yml
+++ b/.github/workflows/gitee.yml
@ -26,7 +26,7 @@ jobs:

      - name: Deploy 🔧
        run: |
-          pnpm install
+          pnpm install --no-frozen-lockfile
          sed -i "s#VITE_PUBLIC_PATH = /#VITE_PUBLIC_PATH = /vue-pure-admin/#g" $(pwd)/.env.production
          pnpm build
          cd dist
--- a/package.json
+++ b/package.json
@ -34,7 +34,7 @@
    "@logicflow/core": "^1.2.5",
    "@logicflow/extension": "^1.2.5",
    "@pureadmin/descriptions": "^1.1.1",
-    "@pureadmin/table": "^2.0.0",
+    "@pureadmin/table": "^2.1.0",
    "@pureadmin/utils": "^1.8.9",
    "@vueuse/core": "^10.1.2",
    "@vueuse/motion": "2.0.0-beta.12",
@ -57,12 +57,12 @@
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.0.35",
+    "pinia": "^2.0.36",
    "qrcode": "^1.5.3",
    "qs": "^6.11.1",
    "responsive-storage": "^2.2.0",
    "sortablejs": "^1.15.0",
-    "swiper": "^9.2.4",
+    "swiper": "^9.3.0",
    "typeit": "^8.7.1",
    "v-contextmenu": "3.0.0",
    "vue": "^3.2.47",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -12,7 +12,7 @@ specifiers:
  "@logicflow/core": ^1.2.5
  "@logicflow/extension": ^1.2.5
  "@pureadmin/descriptions": ^1.1.1
-  "@pureadmin/table": ^2.0.0
+  "@pureadmin/table": ^2.1.0
  "@pureadmin/theme": ^3.0.0
  "@pureadmin/utils": ^1.8.9
  "@types/element-resize-detector": 1.1.3
@ -60,7 +60,7 @@ specifiers:
  nprogress: ^0.2.0
  path: ^0.12.7
  picocolors: ^1.0.0
-  pinia: ^2.0.35
+  pinia: ^2.0.36
  postcss: ^8.4.23
  postcss-html: ^1.5.0
  postcss-import: ^15.1.0
@ -87,7 +87,7 @@ specifiers:
  stylelint-prettier: ^3.0.0
  stylelint-scss: ^5.0.0
  svgo: ^3.0.2
-  swiper: ^9.2.4
+  swiper: ^9.3.0
  tailwindcss: ^3.3.2
  terser: ^5.17.1
  typeit: ^8.7.1
@ -120,7 +120,7 @@ dependencies:
  "@logicflow/core": 1.2.5
  "@logicflow/extension": 1.2.5
  "@pureadmin/descriptions": 1.1.1_element-plus@2.3.4
-  "@pureadmin/table": 2.0.0_element-plus@2.3.4
+  "@pureadmin/table": 2.1.0_element-plus@2.3.4
  "@pureadmin/utils": 1.8.9_echarts@5.4.2+vue@3.2.47
  "@vueuse/core": 10.1.2_vue@3.2.47
  "@vueuse/motion": 2.0.0-beta.12_vue@3.2.47
@ -143,12 +143,12 @@ dependencies:
  mockjs: 1.1.0
  nprogress: 0.2.0
  path: 0.12.7
-  pinia: 2.0.35_dtjfskxukdxv24psui2m5c75zy
+  pinia: 2.0.36_dtjfskxukdxv24psui2m5c75zy
  qrcode: 1.5.3
  qs: 6.11.1
  responsive-storage: 2.2.0
  sortablejs: 1.15.0
-  swiper: 9.2.4
+  swiper: 9.3.0
  typeit: 8.7.1
  v-contextmenu: 3.0.0_vue@3.2.47
  vue: 3.2.47
@ -2495,10 +2495,10 @@ packages:
      vue: 3.2.47
    dev: false

-  /@pureadmin/table/2.0.0_element-plus@2.3.4:
+  /@pureadmin/table/2.1.0_element-plus@2.3.4:
    resolution:
      {
-        integrity: sha512-B5+vniSskCOjXLbQA+quPtySoOdwrhQOV93ruSwaUUZvRXxbfro1C3tAhUk/xYSeg8CbGrjoKdXYtN+yGjn6YA==
+        integrity: sha512-svPWYqT/7XScfaM/LFYd1bXIq/kMbOeRQ/5pi79XvxtO4CyA9Y6uiFxQzW1m8rwPDGc2wfs5DiiayyS53Bdv9A==
      }
    peerDependencies:
      element-plus: ^2.0.0
@ -9464,10 +9464,10 @@ packages:
    engines: { node: ">=0.10.0" }
    dev: true

-  /pinia/2.0.35_dtjfskxukdxv24psui2m5c75zy:
+  /pinia/2.0.36_dtjfskxukdxv24psui2m5c75zy:
    resolution:
      {
-        integrity: sha512-P1IKKQWhxGXiiZ3atOaNI75bYlFUbRxtJdhPLX059Z7+b9Z04rnTZdSY8Aph1LA+/4QEMAYHsTQ638Wfe+6K5g==
+        integrity: sha512-4UKApwjlmJH+VuHKgA+zQMddcCb3ezYnyewQ9NVrsDqZ/j9dMv5+rh+1r48whKNdpFkZAWVxhBp5ewYaYX9JcQ==
      }
    peerDependencies:
      "@vue/composition-api": ^1.4.0
@ -11763,10 +11763,10 @@ packages:
      picocolors: 1.0.0
    dev: true

-  /swiper/9.2.4:
+  /swiper/9.3.0:
    resolution:
      {
-        integrity: sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==
+        integrity: sha512-iELlQVvWLdyfUjQSfhg8UTKBvgfm3uCfv3wJ3f9wbSWP6spzoOTLcob87A8ywPS2FRc552JmrnyL5+LYfN8j9Q==
      }
    engines: { node: ">= 4.7.0" }
    dependencies:
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@ -1,5 +1,5 @@
-import { delay } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { delay, getKeyList, cloneDeep } from "@pureadmin/utils";
 import { defineComponent, ref, computed, type PropType } from "vue";
 import ExpandIcon from "./svg/expand.svg?component";
 import RefreshIcon from "./svg/refresh.svg?component";
@ -15,6 +15,11 @@ const props = {
  /** 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 */
  tableRef: {
    type: Object as PropType<any>
+  },
+  /** 需要展示的列 */
+  columns: {
+    type: Array as PropType<TableColumnList>,
+    default: () => []
  }
 };

@ -24,10 +29,14 @@ export default defineComponent({
  emits: ["refresh"],
  setup(props, { emit, slots, attrs }) {
    const buttonRef = ref();
-    const checkList = ref([]);
    const size = ref("default");
    const isExpandAll = ref(true);
    const loading = ref(false);
+    const checkAll = ref(true);
+    const isIndeterminate = ref(false);
+    let checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
+    const checkedColumns = ref(checkColumnList);
+    const dynamicColumns = ref(cloneDeep(props?.columns));

    const getDropdownItemStyle = computed(() => {
      return s => {
@ -50,6 +59,19 @@ export default defineComponent({
      ];
    });

+    const topClass = computed(() => {
+      return [
+        "flex",
+        "justify-between",
+        "pt-[3px]",
+        "px-[11px]",
+        "border-b-[1px]",
+        "border-solid",
+        "border-[#dcdfe6]",
+        "dark:border-[#303030]"
+      ];
+    });
+
    function onReFresh() {
      loading.value = true;
      emit("refresh");
@ -70,6 +92,33 @@ export default defineComponent({
      });
    }

+    function handleCheckAllChange(val: boolean) {
+      checkedColumns.value = val ? checkColumnList : [];
+      isIndeterminate.value = false;
+      dynamicColumns.value.map(column =>
+        val ? (column.hide = false) : (column.hide = true)
+      );
+    }
+
+    function handleCheckedColumnsChange(value: string[]) {
+      const checkedCount = value.length;
+      checkAll.value = checkedCount === checkColumnList.length;
+      isIndeterminate.value =
+        checkedCount > 0 && checkedCount < checkColumnList.length;
+    }
+
+    function handleCheckColumnListChange(val: boolean, index: number) {
+      dynamicColumns.value[index].hide = !val;
+    }
+
+    function onReset() {
+      checkAll.value = true;
+      isIndeterminate.value = false;
+      checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
+      checkedColumns.value = checkColumnList;
+      dynamicColumns.value = cloneDeep(props?.columns);
+    }
+
    const dropdown = {
      dropdown: () => (
        <el-dropdown-menu class="translation">
@ -150,11 +199,56 @@ export default defineComponent({
              </el-tooltip>
              <el-divider direction="vertical" />

-              <el-popover v-slots={reference} width="200" trigger="click">
-                <el-checkbox-group v-model={checkList.value}>
-                  <el-checkbox label="序号列" />
-                  <el-checkbox label="勾选列" />
-                </el-checkbox-group>
+              <el-popover
+                v-slots={reference}
+                popper-style={{ padding: 0 }}
+                width="160"
+                trigger="click"
+              >
+                <div class={[topClass.value]}>
+                  <el-checkbox
+                    class="!-mr-1"
+                    label="列展示"
+                    v-model={checkAll.value}
+                    indeterminate={isIndeterminate.value}
+                    onChange={value => handleCheckAllChange(value)}
+                  />
+                  <el-button type="primary" link onClick={() => onReset()}>
+                    重置
+                  </el-button>
+                </div>
+
+                <div class="pt-[6px] pl-[11px]">
+                  <el-checkbox-group
+                    v-model={checkedColumns.value}
+                    onChange={value => handleCheckedColumnsChange(value)}
+                  >
+                    <el-space
+                      direction="vertical"
+                      alignment="flex-start"
+                      size={0}
+                    >
+                      {checkColumnList.map((item, index) => {
+                        return (
+                          <el-checkbox
+                            key={item}
+                            label={item}
+                            onChange={value =>
+                              handleCheckColumnListChange(value, index)
+                            }
+                          >
+                            <span
+                              title={item}
+                              class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                            >
+                              {item}
+                            </span>
+                          </el-checkbox>
+                        );
+                      })}
+                    </el-space>
+                  </el-checkbox-group>
+                </div>
              </el-popover>
            </div>

@ -177,7 +271,10 @@ export default defineComponent({
              content="列设置"
            />
          </div>
-          {slots.default({ size: size.value, checkList: checkList.value })}
+          {slots.default({
+            size: size.value,
+            dynamicColumns: dynamicColumns.value
+          })}
        </div>
      </>
    );
--- a/src/views/pure-table/high/page/index.vue
+++ b/src/views/pure-table/high/page/index.vue
@ -54,7 +54,7 @@ const {
      row-key="id"
      alignWhole="center"
      showOverflowTooltip
-      :size="tableSize"
+      :size="tableSize as any"
      :loading="loading"
      :loading-config="loadingConfig"
      :height="tableSize === 'small' ? 352 : 440"
--- a/src/views/system/dept/hook.tsx
+++ b/src/views/system/dept/hook.tsx
@ -12,17 +12,10 @@ export function useDept() {
  const loading = ref(true);

  const columns: TableColumnList = [
-    {
-      type: "selection",
-      width: 55,
-      align: "left",
-      hide: ({ checkList }) => !checkList.includes("勾选列")
-    },
    {
      label: "序号",
      type: "index",
-      minWidth: 70,
-      hide: ({ checkList }) => !checkList.includes("序号列")
+      minWidth: 70
    },
    {
      label: "部门名称",
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@ -73,6 +73,7 @@ const {

    <PureTableBar
      title="部门列表"
+      :columns="columns"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
    >
@ -81,7 +82,7 @@ const {
          新增部门
        </el-button>
      </template>
-      <template v-slot="{ size, checkList }">
+      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          border
@ -93,8 +94,7 @@ const {
          :loading="loading"
          :size="size"
          :data="dataList"
-          :columns="columns"
-          :checkList="checkList"
+          :columns="dynamicColumns"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
--- a/src/views/system/role/hook.tsx
+++ b/src/views/system/role/hook.tsx
@ -22,16 +22,15 @@ export function useRole() {
  });
  const columns: TableColumnList = [
    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
      type: "selection",
      width: 55,
-      align: "left",
-      hide: ({ checkList }) => !checkList.includes("勾选列")
+      align: "left"
    },
    {
      label: "序号",
      type: "index",
-      width: 70,
-      hide: ({ checkList }) => !checkList.includes("序号列")
+      width: 70
    },
    {
      label: "角色编号",
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@ -85,13 +85,13 @@ const {
      </el-form-item>
    </el-form>

-    <PureTableBar title="角色列表" @refresh="onSearch">
+    <PureTableBar title="角色列表" :columns="columns" @refresh="onSearch">
      <template #buttons>
        <el-button type="primary" :icon="useRenderIcon(AddFill)">
          新增角色
        </el-button>
      </template>
-      <template v-slot="{ size, checkList }">
+      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          border
          align-whole="center"
@ -100,8 +100,7 @@ const {
          :loading="loading"
          :size="size"
          :data="dataList"
-          :columns="columns"
-          :checkList="checkList"
+          :columns="dynamicColumns"
          :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false"
          :header-cell-style="{
--- a/src/views/system/user/hook.tsx
+++ b/src/views/system/user/hook.tsx
@ -21,17 +21,10 @@ export function useUser() {
    background: true
  });
  const columns: TableColumnList = [
-    {
-      type: "selection",
-      width: 55,
-      align: "left",
-      hide: ({ checkList }) => !checkList.includes("勾选列")
-    },
    {
      label: "序号",
      type: "index",
-      width: 70,
-      hide: ({ checkList }) => !checkList.includes("序号列")
+      width: 70
    },
    {
      label: "用户编号",
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -88,13 +88,13 @@ const {
        </el-form-item>
      </el-form>

-      <PureTableBar title="用户管理" @refresh="onSearch">
+      <PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
        <template #buttons>
          <el-button type="primary" :icon="useRenderIcon(AddFill)">
            新增用户
          </el-button>
        </template>
-        <template v-slot="{ size, checkList }">
+        <template v-slot="{ size, dynamicColumns }">
          <pure-table
            border
            align-whole="center"
@ -102,8 +102,7 @@ const {
            :loading="loading"
            :size="size"
            :data="dataList"
-            :columns="columns"
-            :checkList="checkList"
+            :columns="dynamicColumns"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -10,10 +10,8 @@ module.exports = {
      colors: {
        bg_color: "var(--el-bg-color)",
        primary: "var(--el-color-primary)",
-        primary_light_9: "var(--el-color-primary-light-9)",
        text_color_primary: "var(--el-text-color-primary)",
-        text_color_regular: "var(--el-text-color-regular)",
-        text_color_disabled: "var(--el-text-color-disabled)"
+        text_color_regular: "var(--el-text-color-regular)"
      }
    }
  }