feat: ✨ 表格新增列设置控制

src/components/PageContent/index.vue

@@ -1,19 +1,12 @@
 <template>
   <el-card shadow="never" class="table-container">
-    <template #header>
+    <div class="flex-x-between mb-[10px]">
+      <div>
         <!-- 表格左上方工具栏 -->
         <template v-for="item in contentConfig.toolbar" :key="item">
           <template v-if="typeof item === 'string'">
-          <!-- 刷新 -->
-          <template v-if="item === 'refresh'">
-            <el-button
-              type="info"
-              icon="refresh"
-              @click="handleToolbar(item)"
-            />
-          </template>
             <!-- 新增 -->
-          <template v-else-if="item === 'add'">
+            <template v-if="item === 'add'">
               <el-button
                 v-hasPerm="[`${contentConfig.pageName}:${item}`]"
                 type="success"
@@ -70,7 +63,45 @@
             </template>
           </template>
         </template>
+      </div>
+
+      <!-- 表格右上方工具栏 -->
+      <div>
+        <el-icon class="cursor-pointer" @click="handleToolbar('refresh')">
+          <i-ep-refresh />
+        </el-icon>
+
+        <!-- 列设置 -->
+        <el-popover placement="bottom" trigger="click">
+          <template #reference>
+            <el-icon class="cursor-pointer ml-2">
+              <i-ep-setting />
+            </el-icon>
           </template>
+
+          <el-checkbox
+            v-model="columnSetting.checkAll"
+            :indeterminate="columnSetting.isIndeterminate"
+            @change="handleCheckAllChange"
+          >
+            全选
+          </el-checkbox>
+
+          <el-checkbox-group
+            v-model="columnSetting.checkedCols"
+            @change="handleCheckedColumnsChange"
+          >
+            <div v-for="col in contentConfig.cols" :key="col.label">
+              <el-checkbox
+                v-if="col.label"
+                :value="col.label"
+                :label="col.label"
+              />
+            </div>
+          </el-checkbox-group>
+        </el-popover>
+      </div>
+    </div>
     <!-- 列表 -->
     <el-table
       v-loading="loading"
@@ -78,9 +109,9 @@
       :data="pageData"
       @selection-change="handleSelectionChange"
     >
-      <template v-for="col in contentConfig.cols" :key="col.prop">
+      <template v-for="col in displayedColumns" :key="col.prop">
         <!-- 显示图片 -->
-        <template v-if="col.templet === 'image'">
+        <template v-if="col.show && col.templet === 'image'">
           <el-table-column v-bind="col">
             <template #default="scope">
               <template v-if="Array.isArray(scope.row[col.prop])">
@@ -109,7 +140,7 @@
           </el-table-column>
         </template>
         <!-- 列操作栏 -->
-        <template v-else-if="col.templet === 'tool'">
+        <template v-else-if="col.show && col.templet === 'tool'">
           <el-table-column v-bind="col">
             <template #default="scope">
               <template v-for="item in col.operat" :key="item">
@@ -180,7 +211,7 @@
           </el-table-column>
         </template>
         <!-- 自定义 -->
-        <template v-else-if="col.templet === 'custom'">
+        <template v-else-if="col.show && col.templet === 'custom'">
           <el-table-column v-bind="col">
             <template #default="scope">
               <slot
@@ -193,7 +224,7 @@
         </template>
         <!-- 其他 -->
         <template v-else>
-          <el-table-column v-bind="col" />
+          <el-table-column v-bind="col" v-if="col.show" />
         </template>
       </template>
     </el-table>
@@ -211,7 +242,7 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import Pagination from "@/components/Pagination/index.vue";
-import type { TableProps } from "element-plus";
+import type { TableProps, CheckboxValueType } from "element-plus";
 
 // 对象类型
 export type IObject = Record<string, any>;
@@ -398,6 +429,53 @@ function exportPageData(queryParams: IObject = {}) {
     ElMessage.error("未配置exportAction");
   }
 }
+
+// 列设置类型声明
+interface IColumnSetting {
+  checkAll: boolean;
+  isIndeterminate: boolean;
+  checkedCols: string[];
+}
+
+// 列设置
+const columnSetting = ref<IColumnSetting>({
+  checkAll: true,
+  isIndeterminate: false,
+  checkedCols: [],
+});
+// 创建一个响应式副本，用于存储最后显示的列配置
+const displayedColumns = ref<IObject>(props.contentConfig.cols);
+
+// 全选/取消全选
+const handleCheckAllChange = (checkAll: CheckboxValueType) => {
+  columnSetting.value.checkedCols = checkAll
+    ? props.contentConfig.cols.map((col) => col.label)
+    : [];
+  columnSetting.value.isIndeterminate = false;
+
+  displayedColumns.value = displayedColumns.value.map((col: IObject) => ({
+    ...col,
+    show: checkAll,
+  }));
+};
+
+// 选中列变化
+const handleCheckedColumnsChange = (values: CheckboxValueType[]) => {
+  const showColumnsLength = props.contentConfig.cols.length;
+
+  const checkedCount = values.length;
+  columnSetting.value.checkAll = checkedCount === showColumnsLength;
+  columnSetting.value.isIndeterminate =
+    checkedCount > 0 && checkedCount < showColumnsLength;
+
+  displayedColumns.value = displayedColumns.value.map((col: IObject) => ({
+    ...col,
+    show: values.includes(col.label),
+  }));
+};
+
+// 初始化全选状态
+handleCheckAllChange(columnSetting.value.checkAll);
 </script>
 
 <style lang="scss" scoped></style>