diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index 34f94a900..8cb2f1584 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -101,7 +101,7 @@ menus: hsInfiniteScroll: 表格无限滚动 hsdanmaku: 弹幕组件 hsPureTableBase: 基础用法（23个示例） - hsPureTableHigh: 高级用法（10个示例） + hsPureTableHigh: 高级用法（11个示例） hsTree: 大数据树业务组件 hsMenuoverflow: 目录超出显示 Tooltip 文字提示 hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示 diff --git a/package.json b/package.json index bf3fa61c8..3bb356ab5 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@logicflow/core": "^1.2.7", "@logicflow/extension": "^1.2.7", "@pureadmin/descriptions": "^1.1.1", - "@pureadmin/table": "^2.3.0", + "@pureadmin/table": "^2.3.2", "@pureadmin/utils": "^1.9.2", "@vueuse/core": "^10.1.2", "@vueuse/motion": "^2.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ca67d6c1a..a9136aee2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,7 +12,7 @@ specifiers: '@logicflow/core': ^1.2.7 '@logicflow/extension': ^1.2.7 '@pureadmin/descriptions': ^1.1.1 - '@pureadmin/table': ^2.3.0 + '@pureadmin/table': ^2.3.2 '@pureadmin/theme': ^3.0.0 '@pureadmin/utils': ^1.9.2 '@types/element-resize-detector': 1.1.3 @@ -122,7 +122,7 @@ dependencies: '@logicflow/core': 1.2.8 '@logicflow/extension': 1.2.8 '@pureadmin/descriptions': 1.1.1_element-plus@2.3.6 - '@pureadmin/table': 2.3.0_element-plus@2.3.6 + '@pureadmin/table': 2.3.2_element-plus@2.3.6 '@pureadmin/utils': 1.9.3_echarts@5.4.2+vue@3.3.4 '@vueuse/core': 10.1.2_vue@3.3.4 '@vueuse/motion': 2.0.0_vue@3.3.4 @@ -1659,8 +1659,8 @@ packages: vue: 3.3.4 dev: false - /@pureadmin/table/2.3.0_element-plus@2.3.6: - resolution: {integrity: sha512-UxDsrq9fTDJ1B9XMnPvHNrjgob5fQccB5zFmLnMg2K68Jq0dVZsULlJDyx2LiaqQqcaE7gf/3uP14aLn7F8beQ==} + /@pureadmin/table/2.3.2_element-plus@2.3.6: + resolution: {integrity: sha512-oaMf8X4bv5KPcO4li+bO7W28BS5IMy+zxPpPNh/Tdxewc2dykvoqqpRIAiS8prJOHxI42/77xbjoGb+lwQH5aA==} peerDependencies: element-plus: ^2.0.0 dependencies: diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts index 0022e8dbb..11845a3e1 100644 --- a/src/utils/mitt.ts +++ b/src/utils/mitt.ts @@ -16,6 +16,7 @@ type Events = { indexPath: string; parentPath: string; }; + setAdaptive: string; }; export const emitter: Emitter = mitt(); diff --git a/src/views/pure-table/high.vue b/src/views/pure-table/high.vue index 66780e9f8..01de09181 100644 --- a/src/views/pure-table/high.vue +++ b/src/views/pure-table/high.vue @@ -1,6 +1,7 @@ diff --git a/src/views/pure-table/high/adaptive/columns.tsx b/src/views/pure-table/high/adaptive/columns.tsx new file mode 100644 index 000000000..75ce6ba54 --- /dev/null +++ b/src/views/pure-table/high/adaptive/columns.tsx @@ -0,0 +1,105 @@ +import type { + LoadingConfig, + AdaptiveConfig, + PaginationProps +} from "@pureadmin/table"; +import { tableData } from "../data"; +import { ref, onMounted, reactive } from "vue"; +import { clone, delay } from "@pureadmin/utils"; + +export function useColumns() { + const dataList = ref([]); + const loading = ref(true); + const columns: TableColumnList = [ + { + label: "日期", + prop: "date" + }, + { + label: "姓名", + prop: "name" + }, + { + label: "地址", + prop: "address" + } + ]; + + /** 分页配置 */ + const pagination = reactive({ + pageSize: 20, + currentPage: 1, + pageSizes: [20, 40, 60], + total: 0, + align: "right", + background: true, + small: false + }); + + /** 加载动画配置 */ + const loadingConfig = reactive({ + text: "正在加载第一页...", + viewBox: "-10, -10, 50, 50", + spinner: ` + + ` + // svg: "", + // background: rgba() + }); + + /** 撑满内容区自适应高度相关配置 */ + const adaptiveConfig: AdaptiveConfig = { + /** 表格距离页面底部的偏移量，默认值为 `96` */ + offsetBottom: 110 + /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */ + // fixHeader: true + /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */ + // timeout: 60 + /** 表头的 `z-index`，默认值为 `100` */ + // zIndex: 100 + }; + + function onSizeChange(val) { + console.log("onSizeChange", val); + } + + function onCurrentChange(val) { + loadingConfig.text = `正在加载第${val}页...`; + loading.value = true; + delay(600).then(() => { + loading.value = false; + }); + } + + onMounted(() => { + delay(600).then(() => { + const newList = []; + Array.from({ length: 6 }).forEach(() => { + newList.push(clone(tableData, true)); + }); + newList.flat(Infinity).forEach((item, index) => { + dataList.value.push({ id: index, ...item }); + }); + pagination.total = dataList.value.length; + loading.value = false; + }); + }); + + return { + loading, + columns, + dataList, + pagination, + loadingConfig, + adaptiveConfig, + onSizeChange, + onCurrentChange + }; +} diff --git a/src/views/pure-table/high/adaptive/index.vue b/src/views/pure-table/high/adaptive/index.vue new file mode 100644 index 000000000..7aa3dbd3c --- /dev/null +++ b/src/views/pure-table/high/adaptive/index.vue @@ -0,0 +1,54 @@ + + + diff --git a/src/views/pure-table/high/list.tsx b/src/views/pure-table/high/list.tsx index f71f8691c..6b19f2f9e 100644 --- a/src/views/pure-table/high/list.tsx +++ b/src/views/pure-table/high/list.tsx @@ -1,3 +1,4 @@ +import Adaptive from "./adaptive/index.vue"; import Page from "./page/index.vue"; import RowDrag from "./drag/row/index.vue"; import ColumnDrag from "./drag/column/index.vue"; @@ -13,6 +14,12 @@ const rendContent = (val: string) => `代码位置：src/views/pure-table/high/${val}/index.vue`; export const list = [ + { + key: "adaptive", + content: rendContent("adaptive"), + title: "自适应内容区高度", + component: Adaptive + }, { key: "page", content: rendContent("page"),