feat(PageContent): ✨ 列表列增加show配置项

src/components/PageContent/index.vue

@@ -59,37 +59,21 @@
         <template v-for="item in defaultToolbar" :key="item">
           <!-- 刷新 -->
           <template v-if="item === 'refresh'">
-            <el-icon class="cursor-pointer ml-2" @click="handleToolbar(item)">
+            <el-button icon="refresh" circle @click="handleToolbar(item)" />
-              <i-ep-refresh />
-            </el-icon>
           </template>
           <!-- 列设置 -->
           <template v-else-if="item === 'filter'">
             <el-popover placement="bottom" trigger="click">
               <template #reference>
-                <el-icon class="cursor-pointer ml-2">
+                <el-button icon="Operation" circle />
-                  <i-ep-setting />
-                </el-icon>
               </template>
+              <template v-for="col in cols" :key="col">
                 <el-checkbox
-                v-model="columnSetting.checkAll"
+                  v-if="col.prop"
-                :indeterminate="columnSetting.isIndeterminate"
+                  v-model="col.show"
-                @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>
+              </template>
-              </el-checkbox-group>
             </el-popover>
           </template>
         </template>
@@ -102,11 +86,12 @@
       :data="pageData"
       @selection-change="handleSelectionChange"
     >
-      <template v-for="col in displayedColumns" :key="col.prop">
+      <template v-for="col in cols" :key="col">
         <el-table-column v-if="col.show" v-bind="col">
           <template #default="scope">
             <!-- 显示图片 -->
             <template v-if="col.templet === 'image'">
+              <template v-if="col.prop">
                 <template v-if="Array.isArray(scope.row[col.prop])">
                   <template
                     v-for="(item, index) in scope.row[col.prop]"
@@ -130,12 +115,16 @@
                   />
                 </template>
               </template>
+            </template>
             <!-- 根据行的selectList属性返回对应列表值 -->
             <template v-else-if="col.templet === 'list'">
+              <template v-if="col.prop">
                 {{ (col.selectList ?? {})[scope.row[col.prop]] }}
               </template>
+            </template>
             <!-- 格式化显示链接 -->
             <template v-else-if="col.templet === 'url'">
+              <template v-if="col.prop">
                 <el-link
                   type="primary"
                   :href="scope.row[col.prop]"
@@ -144,8 +133,10 @@
                   {{ scope.row[col.prop] }}
                 </el-link>
               </template>
+            </template>
             <!-- 生成开关组件 -->
             <template v-else-if="col.templet === 'switch'">
+              <template v-if="col.prop">
                 <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
                 <el-switch
                   v-model="scope.row[col.prop]"
@@ -158,20 +149,28 @@
                   :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
                   @change="
                     pageData.length > 0 &&
-                    handleSwitchChange(col.prop, scope.row[col.prop], scope.row)
+                      handleSwitchChange(
+                        col.prop,
+                        scope.row[col.prop],
+                        scope.row
+                      )
                   "
                 />
               </template>
+            </template>
             <!-- 格式化为价格 -->
             <template v-else-if="col.templet === 'price'">
+              <template v-if="col.prop">
                 {{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
               </template>
+            </template>
             <!-- 格式化为百分比 -->
             <template v-else-if="col.templet === 'percent'">
-              {{ scope.row[col.prop] }}%
+              <template v-if="col.prop"> {{ scope.row[col.prop] }}% </template>
             </template>
             <!-- 显示图标 -->
             <template v-else-if="col.templet === 'icon'">
+              <template v-if="col.prop">
                 <template v-if="scope.row[col.prop].startsWith('el-icon-')">
                   <el-icon>
                     <component
@@ -183,8 +182,10 @@
                   <svg-icon :icon-class="scope.row[col.prop]" />
                 </template>
               </template>
+            </template>
             <!-- 格式化时间 -->
             <template v-else-if="col.templet === 'date'">
+              <template v-if="col.prop">
                 {{
                   useDateFormat(
                     scope.row[col.prop],
@@ -192,6 +193,7 @@
                   ).value
                 }}
               </template>
+            </template>
             <!-- 列操作栏 -->
             <template v-else-if="col.templet === 'tool'">
               <template
@@ -271,7 +273,7 @@ import { useDateFormat } from "@vueuse/core";
 import { hasAuth } from "@/plugins/permission";
 import Pagination from "@/components/Pagination/index.vue";
 import SvgIcon from "@/components/SvgIcon/index.vue";
-import type { TableProps, CheckboxValueType } from "element-plus";
+import type { TableProps } from "element-plus";
 
 // 对象类型
 export type IObject = Record<string, any>;
@@ -322,6 +324,7 @@ export interface IContentConfig<T = any> {
     prop?: string;
     width?: string | number;
     align?: "left" | "center" | "right";
+    show?: boolean;
     templet?:
       | "image"
       | "list"
@@ -378,6 +381,15 @@ const defaultToolbar = props.contentConfig.defaultToolbar ?? [
   "refresh",
   "filter",
 ];
+// 表格列
+const cols = ref(
+  props.contentConfig.cols.map((col) => {
+    if (col.show === undefined) {
+      col.show = true;
+    }
+    return col;
+  })
+);
 // 加载状态
 const loading = ref(false);
 // 删除ID集合 用于批量删除
@@ -525,53 +537,6 @@ function handleSwitchChange(
     ElMessage.error("未配置modifyAction");
   }
 }
-
-// 列设置类型声明
-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) as any[])
-    : [];
-  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>

src/views/demo/curd/config/content.ts

@@ -33,7 +33,7 @@ const contentConfig: IContentConfig<UserQuery> = {
   ],
   cols: [
     { type: "selection", width: 50, align: "center" },
-    { label: "编号", align: "center", prop: "id", width: 100 },
+    { label: "编号", align: "center", prop: "id", width: 100, show: false },
     { label: "用户名", align: "center", prop: "username" },
     { label: "头像", align: "center", prop: "avatar", templet: "image" },
     { label: "用户昵称", align: "center", prop: "nickname", width: 120 },

src/views/demo/curd/config/content2.ts

@@ -2,6 +2,9 @@ import type { IContentConfig } from "@/components/PageContent/index.vue";
 
 const contentConfig: IContentConfig = {
   pageName: "sys:user",
+  table: {
+    showOverflowTooltip: true,
+  },
   indexAction: function (params) {
     // console.log("indexAction:", params);
     return Promise.resolve({
@@ -44,7 +47,7 @@ const contentConfig: IContentConfig = {
   },
   cols: [
     { type: "selection", width: 50, align: "center" },
-    { label: "ID", align: "center", prop: "id" },
+    { label: "ID", align: "center", prop: "id", show: false },
     { label: "用户名", align: "center", prop: "username" },
     { label: "图片", align: "center", prop: "avatar", templet: "image" },
     {