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

2025-11-09 13:53:38 +08:00 · 2023-05-09 14:33:19 +08:00
parent 42f5a36145
commit 723cb46eaf
12 changed files with 137 additions and 59 deletions
--- 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="{