Merge pull request #93 from cshaptx4869/patch-55

feat(PageContent): ✨ 增加defaultToolbar配置参数

src/components/PageContent/index.vue

@@ -1,8 +1,9 @@
 <template>
   <el-card shadow="never" class="table-container">
+    <!-- 表格工具栏 -->
     <div class="flex-x-between mb-[10px]">
+      <!-- 左侧工具栏 -->
       <div>
-        <!-- 表格左上方工具栏 -->
         <template v-for="item in contentConfig.toolbar" :key="item">
           <template v-if="typeof item === 'string'">
             <!-- 新增 -->
@@ -64,42 +65,47 @@
           </template>
         </template>
       </div>
-
+      <!-- 右侧工具栏 -->
-      <!-- 表格右上方工具栏 -->
       <div>
-        <el-icon class="cursor-pointer" @click="handleToolbar('refresh')">
+        <template v-for="item in defaultToolbar" :key="item">
-          <i-ep-refresh />
+          <template v-if="item === 'refresh'">
-        </el-icon>
+            <el-icon class="cursor-pointer ml-2" @click="handleToolbar(item)">
-
+              <i-ep-refresh />
-        <!-- 列设置 -->
-        <el-popover placement="bottom" trigger="click">
-          <template #reference>
-            <el-icon class="cursor-pointer ml-2">
-              <i-ep-setting />
             </el-icon>
           </template>
 
-          <el-checkbox
+          <template v-else-if="item === 'filter'">
-            v-model="columnSetting.checkAll"
+            <!-- 列设置 -->
-            :indeterminate="columnSetting.isIndeterminate"
+            <el-popover placement="bottom" trigger="click">
-            @change="handleCheckAllChange"
+              <template #reference>
-          >
+                <el-icon class="cursor-pointer ml-2">
-            全选
+                  <i-ep-setting />
-          </el-checkbox>
+                </el-icon>
+              </template>
 
-          <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"
+                v-model="columnSetting.checkAll"
-                :value="col.label"
+                :indeterminate="columnSetting.isIndeterminate"
-                :label="col.label"
+                @change="handleCheckAllChange"
-              />
+              >
-            </div>
+                全选
-          </el-checkbox-group>
+              </el-checkbox>
-        </el-popover>
+
+              <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>
+          </template>
+        </template>
       </div>
     </div>
     <!-- 列表 -->
@@ -266,9 +272,8 @@ export interface IContentConfig<T = any> {
   exportAction?: (queryParams: T) => Promise<any>;
   // 主键名(默认为id)
   pk?: string;
-  // 表格工具栏(默认支持refresh,add,delete,export,也可自定义)
+  // 表格工具栏(默认支持add,delete,export,也可自定义)
   toolbar: (
-    | "refresh"
     | "add"
     | "delete"
     | "export"
@@ -279,6 +284,8 @@ export interface IContentConfig<T = any> {
         text: string;
       }
   )[];
+  // 表格工具栏右侧图标
+  defaultToolbar?: ("refresh" | "filter")[];
   // table组件列属性(额外的属性templet,operat,slotName)
   cols: IObject[];
 }
@@ -298,6 +305,11 @@ defineExpose({ fetchPageData, exportPageData });
 
 // 主键
 const pk = props.contentConfig.pk ?? "id";
+// 表格工具栏右侧图标
+const defaultToolbar = props.contentConfig.defaultToolbar ?? [
+  "refresh",
+  "filter",
+];
 // 加载状态
 const loading = ref(false);
 // 删除ID集合 用于批量删除

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

@@ -21,7 +21,6 @@ const contentConfig: IContentConfig<UserQuery> = {
   exportAction: UserAPI.export,
   pk: "id",
   toolbar: [
-    "refresh",
     "add",
     "delete",
     "export",