diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
index 29a01c6e..7ec2e6ab 100644
--- a/src/components/PageContent/index.vue
+++ b/src/components/PageContent/index.vue
@@ -59,37 +59,21 @@
-
-
-
+
-
-
-
+
+
+
+
-
- 全选
-
-
-
-
-
-
@@ -102,95 +86,113 @@
:data="pageData"
@selection-change="handleSelectionChange"
>
-
+
-
-
+
+
+
+
+
+
+
-
-
-
- {{ (col.selectList ?? {})[scope.row[col.prop]] }}
+
+ {{ (col.selectList ?? {})[scope.row[col.prop]] }}
+
-
- {{ scope.row[col.prop] }}
-
+
+
+ {{ scope.row[col.prop] }}
+
+
-
- 0 &&
- handleSwitchChange(col.prop, scope.row[col.prop], scope.row)
- "
- />
+
+
+ 0 &&
+ handleSwitchChange(
+ col.prop,
+ scope.row[col.prop],
+ scope.row
+ )
+ "
+ />
+
- {{ `${col.priceFormat ?? "¥"}${scope.row[col.prop]}` }}
+
+ {{ `${col.priceFormat ?? "¥"}${scope.row[col.prop]}` }}
+
- {{ scope.row[col.prop] }}%
+ {{ scope.row[col.prop] }}%
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
- {{
- useDateFormat(
- scope.row[col.prop],
- col.dateFormat ?? "YYYY-MM-DD HH:mm:ss"
- ).value
- }}
+
+ {{
+ useDateFormat(
+ scope.row[col.prop],
+ col.dateFormat ?? "YYYY-MM-DD HH:mm:ss"
+ ).value
+ }}
+
@@ -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;
@@ -322,6 +324,7 @@ export interface IContentConfig {
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({
- checkAll: true,
- isIndeterminate: false,
- checkedCols: [],
-});
-// 创建一个响应式副本,用于存储最后显示的列配置
-const displayedColumns = ref(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);
diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts
index a05a37db..ddbb51d0 100644
--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -33,7 +33,7 @@ const contentConfig: IContentConfig = {
],
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 },
diff --git a/src/views/demo/curd/config/content2.ts b/src/views/demo/curd/config/content2.ts
index ea310d5e..b4b02c7e 100644
--- a/src/views/demo/curd/config/content2.ts
+++ b/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" },
{