feat: ✨ 添加demo: 动态Table,拖拽Table,综合Table

Former-commit-id: 0c0746cc6a

.eslintrc-auto-import.json

@@ -1,10 +1,16 @@
 {
   "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
     "EffectScope": true,
-    "ElForm": true,
     "ElMessage": true,
     "ElMessageBox": true,
-    "ElTree": true,
+    "ElNotification": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
     "asyncComputed": true,
     "autoResetRef": true,
     "computed": true,
@@ -19,7 +25,9 @@
     "createGlobalState": true,
     "createInjectionState": true,
     "createReactiveFn": true,
+    "createReusableTemplate": true,
     "createSharedComposable": true,
+    "createTemplatePromise": true,
     "createUnrefFn": true,
     "customRef": true,
     "debouncedRef": true,
@@ -75,7 +83,6 @@
     "refThrottled": true,
     "refWithControl": true,
     "resolveComponent": true,
-    "resolveDirective": true,
     "resolveRef": true,
     "resolveUnref": true,
     "shallowReactive": true,
@@ -90,6 +97,7 @@
     "toReactive": true,
     "toRef": true,
     "toRefs": true,
+    "toValue": true,
     "triggerRef": true,
     "tryOnBeforeMount": true,
     "tryOnBeforeUnmount": true,
@@ -100,11 +108,14 @@
     "unrefElement": true,
     "until": true,
     "useActiveElement": true,
+    "useAnimate": true,
+    "useArrayDifference": true,
     "useArrayEvery": true,
     "useArrayFilter": true,
     "useArrayFind": true,
     "useArrayFindIndex": true,
     "useArrayFindLast": true,
+    "useArrayIncludes": true,
     "useArrayJoin": true,
     "useArrayMap": true,
     "useArrayReduce": true,
@@ -190,6 +201,8 @@
     "useOnline": true,
     "usePageLeave": true,
     "useParallax": true,
+    "useParentElement": true,
+    "usePerformanceObserver": true,
     "usePermission": true,
     "usePointer": true,
     "usePointerLock": true,
@@ -255,8 +268,10 @@
     "watchArray": true,
     "watchAtMost": true,
     "watchDebounced": true,
+    "watchDeep": true,
     "watchEffect": true,
     "watchIgnorable": true,
+    "watchImmediate": true,
     "watchOnce": true,
     "watchPausable": true,
     "watchPostEffect": true,

mock/article.ts

@@ -0,0 +1,168 @@
+import { MockMethod } from "vite-plugin-mock";
+
+const article_list: any = [];
+const count = 100;
+
+for (let i = 0; i < count; i++) {
+  article_list.push({
+    id: i,
+    timestamp: new Date().getTime(),
+    author: `Author ${i}`,
+    reviewer: `reviewer ${i}`,
+    title: `Title ${i}`,
+    importance: Math.floor(Math.random() * 3) + 1,
+    type: ["CN", "US", "JP", "EU"][Math.floor(Math.random() * 4)],
+    status: ["published", "draft"][Math.floor(Math.random() * 2)],
+    display_time: new Date().toISOString(),
+    pageviews: Math.floor(Math.random() * (5000 - 300)) + 300,
+    remark: `remark ${i}`,
+  });
+}
+
+export default [
+  {
+    url: "/api/v1/article/list",
+    timeout: 200,
+    method: "get",
+    response: ({ query }) => {
+      const { importance, type, title, page = 1, limit = 10, sort } = query;
+      let mock_list = article_list.filter((item: any) => {
+        if (importance && item.importance !== +importance) return false;
+        if (type && item.type !== type) return false;
+        if (title && item.title.indexOf(title) < 0) return false;
+        if (item.status === "deleted") return false;
+        return true;
+      });
+      if (sort === "-id") {
+        mock_list = mock_list.reverse();
+      }
+      const page_list = mock_list.filter(
+        (item: any, index: number) =>
+          index < limit * page && index >= limit * (page - 1)
+      );
+
+      return {
+        code: "00000",
+        data: { total: mock_list.length, page: page, items: page_list },
+        msg: "一切ok",
+      };
+    },
+  },
+  {
+    url: "/api/v1/article/detail",
+    timeout: 200,
+    method: "get",
+    response: ({ query }) => {
+      const { id } = query;
+      for (const article of article_list) {
+        if (article.id === +id) {
+          return {
+            code: "00000",
+            data: article,
+            msg: "一切ok",
+          };
+        }
+      }
+    },
+  },
+  {
+    url: "/api/v1/article/pv",
+    timeout: 200,
+    method: "get",
+    response: ({ query }) => {
+      const { id } = query;
+      for (const article of article_list) {
+        if (article.id === +id) {
+          return {
+            code: "00000",
+            data: {
+              pv: article.pageviews,
+              pvData: [
+                { key: "PC", pv: 1024 },
+                { key: "mobile", pv: 1024 },
+                { key: "ios", pv: 1024 },
+                { key: "android", pv: 1024 },
+              ],
+            },
+            msg: "一切ok",
+          };
+        }
+      }
+    },
+  },
+  {
+    url: "/api/v1/article/update",
+    timeout: 200,
+    method: "post",
+    response: ({ body }) => {
+      const { id, ...updatedFields } = body;
+      // 查找要更新的文章
+      const articleToUpdate = article_list.find(
+        (article: any) => article.id === id
+      );
+
+      // 如果找到了要更新的文章
+      if (articleToUpdate) {
+        // 使用 Object.assign 方法更新文章
+        Object.assign(articleToUpdate, updatedFields);
+        return {
+          code: "00000",
+          data: {
+            article: articleToUpdate,
+          },
+          msg: "一切ok",
+        };
+      } else {
+        console.error(`Article with id ${id} not found.`);
+      }
+    },
+  },
+  {
+    url: "/api/v1/article/create",
+    timeout: 200,
+    method: "post",
+    response: ({ body }) => {
+      const { title, author, importance, type, status, remark, timestamp } =
+        body;
+      // article_list最大的id值;
+      const maxId = article_list.reduce((maxId: number, article: any) => {
+        return Math.max(maxId, article.id);
+      }, -1);
+      const article = {
+        id: maxId + 1,
+        timestamp,
+        author,
+        reviewer: `reviewer ${maxId + 1}`,
+        title,
+        importance,
+        type,
+        status,
+        display_time: new Date(timestamp).toISOString(),
+        pageviews: Math.floor(Math.random() * (5000 - 300)) + 300,
+        remark,
+      };
+      article_list.push(article);
+      return {
+        code: "00000",
+        data: {
+          article,
+        },
+        msg: "一切ok",
+      };
+    },
+  },
+  {
+    url: "/api/v1/article/delete",
+    timeout: 200,
+    method: "post",
+    response: ({ body }) => {
+      const { id } = body;
+      const index = article_list.findIndex((article: any) => article.id === id);
+      article_list.splice(index, 1);
+      return {
+        code: "00000",
+        msg: "一切ok",
+      };
+    },
+  },
+] as MockMethod[];

mock/router.ts

@@ -291,6 +291,52 @@ const data = {
         },
       ],
     },
+    {
+      path: "/table",
+      component: "Layout",
+      meta: {
+        title: "Table",
+        icon: "table",
+        hidden: false,
+        roles: ["ADMIN"],
+        keepAlive: true,
+      },
+      children: [
+        {
+          path: "dynamic-table",
+          component: "table/dynamic-table/index",
+          name: "DynamicTable",
+          meta: {
+            title: "动态Table",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "drag-table",
+          component: "table/drag-table",
+          name: "DragTable",
+          meta: {
+            title: "拖拽Table",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "complex-table",
+          component: "table/complex-table",
+          name: "ComplexTable",
+          meta: {
+            title: "综合Table",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+      ],
+    },
     {
       path: "/function",
       component: "Layout",

package.json

@@ -55,6 +55,7 @@
     "path-to-regexp": "^6.2.0",
     "pinia": "^2.0.33",
     "screenfull": "^6.0.0",
+    "sortablejs": "^1.15.0",
     "vue": "^3.3.4",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.2.0",

src/api/article.ts

@@ -0,0 +1,88 @@
+import request from "@/utils/request";
+
+export interface ArticleQuery {
+  page?: number;
+  limit?: number;
+  sort?: string;
+  title?: string;
+  type?: string;
+  importance?: number;
+}
+
+export interface ArticleDetail {
+  id: number;
+  timestamp: number;
+  title: string;
+  type: string;
+  status: string;
+  importance: number;
+  content?: string;
+  remark?: string;
+}
+
+export interface ArticleCreate {
+  type: string;
+  timestamp: Date;
+  title: string;
+  status?: string;
+  importance?: number;
+  remark?: string;
+}
+
+export interface ArticleUpdate {
+  id: number;
+  type?: string;
+  timestamp?: Date;
+  title?: string;
+  status?: string;
+  importance?: number;
+  remark?: string;
+}
+
+export function fetchList(query: ArticleQuery) {
+  return request({
+    url: "/api/v1/article/list",
+    method: "get",
+    params: query,
+  });
+}
+
+export function fetchArticle(id: number) {
+  return request({
+    url: "/api/v1/article/detail",
+    method: "get",
+    params: { id },
+  });
+}
+
+export function fetchPv(id: number) {
+  return request({
+    url: "/api/v1/article/pv",
+    method: "get",
+    params: { id },
+  });
+}
+
+export function createArticle(data: ArticleCreate) {
+  return request({
+    url: "/api/v1/article/create",
+    method: "post",
+    data,
+  });
+}
+
+export function updateArticle(data: ArticleUpdate) {
+  return request({
+    url: "/api/v1/article/update",
+    method: "post",
+    data,
+  });
+}
+
+export function deleteArticle(id: number) {
+  return request({
+    url: "/api/v1/article/delete",
+    method: "post",
+    params: { id },
+  });
+}

src/assets/icons/star.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M70.66 4.328l14.01 29.693c1.088 2.29 3.177 3.882 5.603 4.25l31.347 4.76c6.087.926 8.528 8.756 4.117 13.247L103.05 79.395c-1.75 1.78-2.544 4.352-2.132 6.867l5.352 32.641c1.043 6.337-5.33 11.182-10.778 8.19l-28.039-15.409a7.13 7.13 0 0 0-6.91 0l-28.039 15.41c-5.448 2.99-11.821-1.854-10.777-8.19l5.352-32.642c.415-2.515-.387-5.088-2.136-6.867L2.264 56.278C-2.146 51.787.286 43.957 6.38 43.031l31.343-4.76c2.419-.368 4.51-1.96 5.595-4.25L57.334 4.328c2.728-5.77 10.605-5.77 13.325 0z"/></svg>

src/assets/icons/table.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>

src/layout/components/TagsView/index.vue

@@ -203,8 +203,6 @@ function closeAllTags(view: TagView) {
 function openTagMenu(tag: TagView, e: MouseEvent) {
   const menuMinWidth = 105;
 
-  console.log("test", proxy?.$el);
-
   const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
   const offsetWidth = proxy?.$el.offsetWidth; // container width
   const maxLeft = offsetWidth - menuMinWidth; // left boundary

src/styles/index.scss

@@ -14,3 +14,13 @@
   border-radius: 4px;
   box-shadow: var(--el-box-shadow-light);
 }
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32 160 255);
+  }
+}

src/types/auto-imports.d.ts

@@ -5,10 +5,9 @@
 export {}
 declare global {
   const EffectScope: typeof import("vue")["EffectScope"];
-  const ElForm: typeof import("element-plus/es")["ElForm"];
   const ElMessage: typeof import("element-plus/es")["ElMessage"];
   const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"];
-  const ElTree: typeof import("element-plus/es")["ElTree"];
+  const ElNotification: typeof import("element-plus/es")["ElNotification"];
   const asyncComputed: typeof import("@vueuse/core")["asyncComputed"];
   const autoResetRef: typeof import("@vueuse/core")["autoResetRef"];
   const computed: typeof import("vue")["computed"];
@@ -297,14 +296,15 @@ import { UnwrapRef } from "vue";
 declare module "vue" {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import("vue")["EffectScope"]>;
-    readonly ElForm: UnwrapRef<typeof import("element-plus/es")["ElForm"]>;
     readonly ElMessage: UnwrapRef<
       typeof import("element-plus/es")["ElMessage"]
     >;
     readonly ElMessageBox: UnwrapRef<
       typeof import("element-plus/es")["ElMessageBox"]
     >;
-    readonly ElTree: UnwrapRef<typeof import("element-plus/es")["ElTree"]>;
+    readonly ElNotification: UnwrapRef<
+      typeof import("element-plus/es")["ElNotification"]
+    >;
     readonly asyncComputed: UnwrapRef<
       typeof import("@vueuse/core")["asyncComputed"]
     >;
@@ -943,14 +943,15 @@ declare module "vue" {
 declare module "@vue/runtime-core" {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import("vue")["EffectScope"]>;
-    readonly ElForm: UnwrapRef<typeof import("element-plus/es")["ElForm"]>;
     readonly ElMessage: UnwrapRef<
       typeof import("element-plus/es")["ElMessage"]
     >;
     readonly ElMessageBox: UnwrapRef<
       typeof import("element-plus/es")["ElMessageBox"]
     >;
-    readonly ElTree: UnwrapRef<typeof import("element-plus/es")["ElTree"]>;
+    readonly ElNotification: UnwrapRef<
+      typeof import("element-plus/es")["ElNotification"]
+    >;
     readonly asyncComputed: UnwrapRef<
       typeof import("@vueuse/core")["asyncComputed"]
     >;

src/types/components.d.ts

@@ -12,12 +12,15 @@ declare module "@vue/runtime-core" {
     AppMain: typeof import("./../layout/components/AppMain.vue")["default"];
     BarChart: typeof import("./../views/dashboard/components/BarChart.vue")["default"];
     Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"];
-    ElAlert: typeof import("element-plus/es")["ElAlert"];
+    Dictionary: typeof import("./../components/Dictionary/index.vue")["default"];
     ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
     ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
     ElButton: typeof import("element-plus/es")["ElButton"];
     ElCard: typeof import("element-plus/es")["ElCard"];
+    ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
+    ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
     ElCol: typeof import("element-plus/es")["ElCol"];
+    ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
     ElDialog: typeof import("element-plus/es")["ElDialog"];
     ElDivider: typeof import("element-plus/es")["ElDivider"];
     ElDropdown: typeof import("element-plus/es")["ElDropdown"];
@@ -25,17 +28,13 @@ declare module "@vue/runtime-core" {
     ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
     ElForm: typeof import("element-plus/es")["ElForm"];
     ElFormItem: typeof import("element-plus/es")["ElFormItem"];
-    ElIcon: typeof import("element-plus/es")["ElIcon"];
     ElInput: typeof import("element-plus/es")["ElInput"];
-    ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
     ElLink: typeof import("element-plus/es")["ElLink"];
     ElMenu: typeof import("element-plus/es")["ElMenu"];
     ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
     ElOption: typeof import("element-plus/es")["ElOption"];
     ElPagination: typeof import("element-plus/es")["ElPagination"];
-    ElPopover: typeof import("element-plus/es")["ElPopover"];
+    ElRate: typeof import("element-plus/es")["ElRate"];
-    ElRadio: typeof import("element-plus/es")["ElRadio"];
-    ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
     ElRow: typeof import("element-plus/es")["ElRow"];
     ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
     ElSelect: typeof import("element-plus/es")["ElSelect"];
@@ -45,31 +44,15 @@ declare module "@vue/runtime-core" {
     ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
     ElTag: typeof import("element-plus/es")["ElTag"];
     ElTooltip: typeof import("element-plus/es")["ElTooltip"];
-    ElTree: typeof import("element-plus/es")["ElTree"];
+    FixedThead: typeof import("./../views/table/dynamic-table/components/FixedThead.vue")["default"];
-    ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
-    ElUpload: typeof import("element-plus/es")["ElUpload"];
     FunnelChart: typeof import("./../views/dashboard/components/FunnelChart.vue")["default"];
     GithubCorner: typeof import("./../components/GithubCorner/index.vue")["default"];
     Hamburger: typeof import("./../components/Hamburger/index.vue")["default"];
     IconSelect: typeof import("./../components/IconSelect/index.vue")["default"];
-    IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];
     IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"];
-    IEpCaretTop: typeof import("~icons/ep/caret-top")["default"];
     IEpClose: typeof import("~icons/ep/close")["default"];
-    IEpCollection: typeof import("~icons/ep/collection")["default"];
-    IEpDelete: typeof import("~icons/ep/delete")["default"];
     IEpDownload: typeof import("~icons/ep/download")["default"];
-    IEpEdit: typeof import("~icons/ep/edit")["default"];
-    IEpPlus: typeof import("~icons/ep/plus")["default"];
-    IEpPosition: typeof import("~icons/ep/position")["default"];
-    IEpRefresh: typeof import("~icons/ep/refresh")["default"];
-    IEpRefreshLeft: typeof import("~icons/ep/refresh-left")["default"];
-    IEpSearch: typeof import("~icons/ep/search")["default"];
     IEpSetting: typeof import("~icons/ep/setting")["default"];
-    IEpSortDown: typeof import("~icons/ep/sort-down")["default"];
-    IEpSortUp: typeof import("~icons/ep/sort-up")["default"];
-    IEpTop: typeof import("~icons/ep/top")["default"];
-    IEpUploadFilled: typeof import("~icons/ep/upload-filled")["default"];
     LangSelect: typeof import("./../components/LangSelect/index.vue")["default"];
     Link: typeof import("./../layout/components/Sidebar/Link.vue")["default"];
     Logo: typeof import("./../layout/components/Sidebar/Logo.vue")["default"];
@@ -88,10 +71,11 @@ declare module "@vue/runtime-core" {
     SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")["default"];
     SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"];
     SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"];
+    SwitchRoles: typeof import("./../views/permission/components/SwitchRoles.vue")["default"];
     TagInput: typeof import("./../components/TagInput/index.vue")["default"];
     TagsView: typeof import("./../layout/components/TagsView/index.vue")["default"];
+    UnfixedThead: typeof import("./../views/table/dynamic-table/components/UnfixedThead.vue")["default"];
     WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
-    Dictionary: typeof import("./../components/Dictionary/index.vue")["default"];
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import("element-plus/es")["ElLoadingDirective"];

src/views/table/Export2Excel.js

@@ -0,0 +1,257 @@
+/* eslint-disable */
+import * as XLSX from "xlsx";
+
+// TODO: this is a toy example, may be file-saver is a better choice
+// import { saveAs } from 'file-saver'
+function saveAs(blob, fileName) {
+  const type = fileName.split(".")[1];
+  console.log(type);
+  const file = new window.File([blob], fileName, { type: type });
+  console.log(file);
+  // 创建一个指向 File 对象的 URL
+  const url = URL.createObjectURL(file);
+
+  // 创建一个 a 标签
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+
+  // 将 a 标签添加到文档中
+  document.body.appendChild(a);
+
+  // 模拟点击 a 标签，开始下载
+  a.click();
+
+  // 下载完成后，从文档中移除 a 标签，并释放 URL
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+  return file;
+}
+
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll("tr");
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll("td");
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute("colspan");
+      var rowspan = cell.getAttribute("rowspan");
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (
+          R >= range.s.r &&
+          R <= range.e.r &&
+          outRow.length >= range.s.c &&
+          outRow.length <= range.e.c
+        ) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length,
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1,
+          },
+        });
+      }
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+}
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000,
+    },
+    e: {
+      c: 0,
+      r: 0,
+    },
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C],
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R,
+      });
+
+      if (typeof cell.v === "number") cell.t = "n";
+      else if (typeof cell.v === "boolean") cell.t = "b";
+      else if (cell.v instanceof Date) {
+        cell.t = "n";
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = "s";
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws["!merges"] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: "xlsx",
+    bookSST: false,
+    type: "binary",
+  });
+
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: "application/octet-stream",
+    }),
+    "test.xlsx"
+  );
+}
+
+export function export_json_to_excel({
+  multiHeader = [],
+  header,
+  data,
+  filename,
+  merges = [],
+  autoWidth = true,
+  bookType = "xlsx",
+} = {}) {
+  /* original data */
+  filename = filename || "excel-list";
+  data = [...data];
+  data.unshift(header);
+
+  for (let i = multiHeader.length - 1; i > -1; i--) {
+    data.unshift(multiHeader[i]);
+  }
+
+  var ws_name = "SheetJS";
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  if (merges.length > 0) {
+    if (!ws["!merges"]) ws["!merges"] = [];
+    merges.forEach((item) => {
+      ws["!merges"].push(XLSX.utils.decode_range(item));
+    });
+  }
+
+  if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map((row) =>
+      row.map((val) => {
+        /*先判断是否为null/undefined*/
+        if (val == null) {
+          return {
+            wch: 10,
+          };
+        } else if (val.toString().charCodeAt(0) > 255) {
+        /*再判断是否为中文*/
+          return {
+            wch: val.toString().length * 2,
+          };
+        } else {
+          return {
+            wch: val.toString().length,
+          };
+        }
+      })
+    );
+    /*以第一行为初始值*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j]["wch"] < colWidth[i][j]["wch"]) {
+          result[j]["wch"] = colWidth[i][j]["wch"];
+        }
+      }
+    }
+    ws["!cols"] = result;
+  }
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: "binary",
+  });
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: "application/octet-stream",
+    }),
+    `${filename}.${bookType}`
+  );
+}

src/views/table/complex-table.vue

@@ -0,0 +1,617 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.title"
+        placeholder="Title"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter="handleFilter"
+      />
+      <el-select
+        v-model="listQuery.importance"
+        placeholder="Imp"
+        clearable
+        style="width: 90px"
+        class="filter-item"
+      >
+        <el-option
+          v-for="item in importanceOptions"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
+      </el-select>
+      <el-select
+        v-model="listQuery.type"
+        placeholder="Type"
+        clearable
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in calendarTypeOptions"
+          :key="item.key"
+          :label="item.display_name + '(' + item.key + ')'"
+          :value="item.key"
+        />
+      </el-select>
+      <el-select
+        v-model="listQuery.sort"
+        style="width: 140px"
+        class="filter-item"
+        @change="handleFilter"
+      >
+        <el-option
+          v-for="item in sortOptions"
+          :key="item.key"
+          :label="item.label"
+          :value="item.key"
+        />
+      </el-select>
+      <el-button
+        class="filter-item"
+        type="primary"
+        :icon="Search"
+        @click="handleFilter"
+      >
+        Search
+      </el-button>
+
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px"
+        type="primary"
+        :icon="Edit"
+        @click="handleCreate"
+      >
+        Add
+      </el-button>
+
+      <el-button
+        :loading="downloadLoading"
+        class="filter-item"
+        type="primary"
+        :icon="Download"
+        @click="handleDownload"
+      >
+        Export
+      </el-button>
+      <el-checkbox
+        v-model="showReviewer"
+        class="filter-item"
+        style="margin-left: 15px"
+        @change="tableKey = tableKey + 1"
+      >
+        reviewer
+      </el-checkbox>
+    </div>
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      @sort-change="sortChange"
+    >
+      <el-table-column
+        label="ID"
+        prop="id"
+        sortable="custom"
+        align="center"
+        width="80"
+        :class-name="getSortClass('id')"
+      >
+        <template #default="{ row }">
+          <span>{{ row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="160px" align="center" label="Date">
+        <template #default="{ row }">
+          <span>{{ formatDate(row.timestamp) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Title" min-width="150px">
+        <template #default="{ row }">
+          <span class="link-type" @click="handleUpdate(row)">{{
+            row.title
+          }}</span>
+          <el-tag>
+            {{ calendarTypeKeyValue[row.type] }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="Author" width="110px" align="center">
+        <template #default="{ row }">
+          <span>{{ row.author }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="showReviewer"
+        label="Reviewer"
+        width="110px"
+        align="center"
+      >
+        <template #default="{ row }">
+          <span style="color: red">{{ row.reviewer }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Imp" width="80px">
+        <template #default="{ row }">
+          <svg-icon
+            v-for="n in +row.importance ? +row.importance : 0"
+            :key="n"
+            icon-class="star"
+            class="meta-item__icon"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="Readings" align="center" width="95">
+        <template #default="{ row }">
+          <span
+            v-if="row.pageviews"
+            class="link-type"
+            @click="handleFetchPv(row.id)"
+            >{{ row.pageviews }}</span
+          >
+          <span v-else>0</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Status" class-name="status-col" width="100">
+        <template #default="{ row }">
+          <el-tag :type="statusType(row.status)">
+            {{ row.status }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="Actions"
+        align="center"
+        width="260"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="{ row, $index }">
+          <el-button type="primary" size="default" @click="handleUpdate(row)">
+            编辑
+          </el-button>
+          <el-button
+            v-if="row.status != 'published'"
+            size="default"
+            type="success"
+            @click="handleModifyStatus(row, 'published')"
+          >
+            发布
+          </el-button>
+          <el-button
+            v-if="row.status != 'draft'"
+            size="default"
+            @click="handleModifyStatus(row, 'draft')"
+          >
+            草稿
+          </el-button>
+
+          <el-button
+            size="default"
+            type="danger"
+            @click="handleDelete(row, $index)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="listQuery.page"
+      v-model:limit="listQuery.limit"
+      @pagination="getList"
+    />
+
+    <el-dialog v-model="dialogPvVisible" title="Reading statistics">
+      <el-table
+        :data="pvData"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+      >
+        <el-table-column prop="key" label="Channel" />
+        <el-table-column prop="pv" label="Pv" />
+      </el-table>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="dialogPvVisible = false">
+            Confirm
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <el-dialog
+      :title="textMap[dialogStatus]"
+      v-model="dialogFormVisible"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="formRef"
+        :rules="rules"
+        :model="formData"
+        label-position="left"
+        label-width="70px"
+        style="width: 400px; margin-left: 50px"
+      >
+        <el-form-item label="Type" prop="type">
+          <el-select
+            v-model="formData.type"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in calendarTypeOptions"
+              :key="item.key"
+              :label="item.display_name"
+              :value="item.key"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Date" prop="timestamp">
+          <el-date-picker
+            v-model="formData.timestamp"
+            type="datetime"
+            placeholder="Please pick a date"
+          />
+        </el-form-item>
+        <el-form-item label="Title" prop="title">
+          <el-input v-model="formData.title" />
+        </el-form-item>
+        <el-form-item label="Status">
+          <el-select
+            v-model="formData.status"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in statusOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Imp">
+          <el-rate
+            v-model="formData.importance"
+            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
+            :max="3"
+            style="margin-top: 8px"
+          />
+        </el-form-item>
+        <el-form-item label="Remark">
+          <el-input
+            v-model="formData.remark"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="Please input"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="resetForm(formRef)">Reset</el-button>
+          <el-button @click="dialogFormVisible = false"> Cancel </el-button>
+          <el-button
+            type="primary"
+            @click="
+              dialogStatus === 'create'
+                ? createData(formRef)
+                : updateData(formRef)
+            "
+          >
+            Confirm</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Edit, Search, Download } from "@element-plus/icons-vue";
+import type { FormInstance, FormRules } from "element-plus";
+
+import {
+  fetchList,
+  fetchPv,
+  createArticle,
+  updateArticle,
+  deleteArticle,
+  ArticleQuery,
+  ArticleDetail,
+  ArticleCreate,
+  ArticleUpdate,
+} from "@/api/article";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "ComplexTable",
+  inheritAttrs: false,
+});
+
+const importanceOptions = [1, 2, 3];
+const sortOptions = [
+  { label: "ID Ascending", key: "+id" },
+  { label: "ID Descending", key: "-id" },
+];
+const statusOptions = ["published", "draft", "deleted"];
+const statusType = (status: string) => {
+  const statusMap = {
+    published: "success",
+    draft: "info",
+    deleted: "danger",
+  };
+  return statusMap[status as keyof typeof statusMap];
+};
+
+const showReviewer = ref(false);
+const downloadLoading = ref(false);
+const tableKey = ref(0);
+const listLoading = ref(true);
+const list = ref<ArticleDetail[]>([]);
+const total = ref(0);
+const dialogPvVisible = ref(false);
+const pvData = ref({});
+const dialogFormVisible = ref(false);
+
+const formRef = ref<FormInstance>();
+
+interface Form {
+  id?: number;
+  type?: string;
+  timestamp?: Date;
+  title?: string;
+  status?: string;
+  importance?: number;
+  remark?: string;
+}
+
+const formData = ref<Form>({});
+const rules = {
+  type: [{ required: true, message: "type is required", trigger: "change" }],
+  timestamp: [
+    {
+      type: "date",
+      required: true,
+      message: "timestamp is required",
+      trigger: "change",
+    },
+  ],
+  title: [{ required: true, message: "title is required", trigger: "blur" }],
+};
+const dialogStatus = ref("");
+const textMap = {
+  update: "Edit",
+  create: "Create",
+};
+
+const listQuery = ref<ArticleQuery>({
+  page: 1,
+  limit: 10,
+  importance: undefined,
+  title: undefined,
+  type: undefined,
+  sort: "+id",
+});
+
+const calendarTypeOptions = [
+  { key: "CN", display_name: "China" },
+  { key: "US", display_name: "USA" },
+  { key: "JP", display_name: "Japan" },
+  { key: "EU", display_name: "Eurozone" },
+];
+
+// arr to obj, such as { CN : "China", US : "USA" }
+const calendarTypeKeyValue = calendarTypeOptions.reduce((acc: any, cur) => {
+  acc[cur.key] = cur.display_name;
+  return acc;
+}, {});
+
+const getList = () => {
+  listLoading.value = true;
+  fetchList(listQuery.value).then((res) => {
+    list.value = res.data.items as ArticleDetail[];
+    total.value = res.data.total;
+    listLoading.value = false;
+  });
+};
+
+const handleFilter = () => {
+  listQuery.value.page = 1;
+  getList();
+};
+
+const handleCreate = () => {
+  console.log("handleCreate");
+  formData.value = {};
+  dialogStatus.value = "create";
+  dialogFormVisible.value = true;
+};
+
+const formatJson = (filterVal: string[]) => {
+  return list.value.map((v: any) =>
+    filterVal.map((j: any) => {
+      if (j === "timestamp") {
+        return formatDate(v[j]);
+      } else {
+        return v[j];
+      }
+    })
+  );
+};
+
+const formatDate = (timestamp: number) => {
+  const date = new Date(timestamp);
+  return date
+    .toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false,
+    })
+    .replace(/\//g, "-");
+};
+
+const handleDownload = () => {
+  downloadLoading.value = true;
+  import("./Export2Excel").then((excel) => {
+    const tHeader = ["timestamp", "title", "type", "importance", "status"];
+    const filterVal = ["timestamp", "title", "type", "importance", "status"];
+    const data = formatJson(filterVal);
+    excel.export_json_to_excel({
+      header: tHeader,
+      data,
+      filename: "table-list",
+    });
+    downloadLoading.value = false;
+  });
+};
+
+const sortChange = (data: any) => {
+  const { prop, order } = data;
+  if (prop === "id") {
+    if (order === "ascending") {
+      listQuery.value.sort = "+id";
+    } else {
+      listQuery.value.sort = "-id";
+    }
+    handleFilter();
+  }
+};
+
+const getSortClass = (key: string) => {
+  const sort = listQuery.value.sort;
+  if (sort === `+${key}`) {
+    return "ascending";
+  } else if (sort === `-${key}`) {
+    return "descending";
+  } else {
+    return "";
+  }
+};
+
+const handleUpdate = (row: any) => {
+  formData.value = Object.assign({}, row);
+  dialogStatus.value = "update";
+  dialogFormVisible.value = true;
+  console.log(formData.value);
+  return;
+};
+
+const createData = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid) => {
+    if (valid) {
+      console.log("submit!");
+      createArticle(formData.value as ArticleCreate).then((res) => {
+        const article = res.data.article;
+        list.value.push(article);
+        dialogFormVisible.value = false;
+        total.value += 1;
+        ElNotification({
+          title: "Success",
+          message: `创建成功 id:${article.id}`,
+          type: "success",
+        });
+      });
+    } else {
+      console.log("error submit!");
+      return false;
+    }
+  });
+};
+
+const updateData = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      updateArticle(formData.value as ArticleUpdate).then((res) => {
+        console.log("updateArticle", res);
+        const article = res.data.article;
+        const index = list.value.findIndex((item) => item.id === article.id);
+        list.value.splice(index, 1, article);
+        dialogFormVisible.value = false;
+        ElNotification({
+          title: "Success",
+          message: `修改成功 id:${article.id}`,
+          type: "success",
+        });
+      });
+      return true;
+    } else {
+      console.log("error submit!", fields);
+      return false;
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const handleFetchPv = (id: number) => {
+  console.log("handleFetchPv", id);
+  fetchPv(id).then((res) => {
+    console.log("fetchPv", res);
+    pvData.value = res.data.pvData;
+    dialogPvVisible.value = true;
+  });
+};
+
+const handleModifyStatus = (row: any, status: string) => {
+  console.log("handleModifyStatus", row, status);
+  const id = row.id;
+  updateArticle({ id, status }).then((res) => {
+    console.log("updateArticle", res);
+    const updateArticle = res.data.article;
+    const index = list.value.findIndex((item) => item.id === id);
+    list.value.splice(index, 1, updateArticle);
+  });
+};
+
+const handleDelete = (row: any, index: number) => {
+  deleteArticle(row.id).then((res) => {
+    list.value.splice(index, 1);
+    total.value -= 1;
+    ElNotification({
+      title: "Success",
+      message: `删除成功 id:${row.id}`,
+      type: "success",
+    });
+  });
+};
+
+onMounted(async () => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-item {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+}
+</style>

src/views/table/drag-table.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="app-container">
+    <!-- Note that row-key is necessary to get a correct row order. -->
+    <el-table
+      class="draggable"
+      ref="dragTable"
+      v-loading="listLoading"
+      :data="list"
+      row-key="id"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column align="center" label="ID" width="65">
+        <template #default="{ row }">
+          <span>{{ row.id }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="180px" align="center" label="Date">
+        <template #default="{ row }">
+          <span>{{ formatDate(row.timestamp) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column min-width="300px" label="Title">
+        <template #default="{ row }">
+          <span>{{ row.title }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="110px" align="center" label="Author">
+        <template #default="{ row }">
+          <span>{{ row.author }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="110px" label="Importance">
+        <template #default="{ row }">
+          <svg-icon
+            v-for="n in +row.importance ? +row.importance : 0"
+            :key="n"
+            icon-class="star"
+            class="icon-star"
+          />
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Readings" width="95">
+        <template #default="{ row }">
+          <span>{{ row.pageviews }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column class-name="status-col" label="Status" width="110">
+        <template #default="{ row }">
+          <el-tag :type="statusType(row.status)">
+            {{ row.status }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Drag" width="80">
+        <template #default="{}">
+          <svg-icon class="drag-handler" icon-class="drag" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="show-d"><el-tag>The default order :</el-tag> {{ oldList }}</div>
+    <div class="show-d">
+      <el-tag>The after dragging order :</el-tag> {{ list.map((v) => v.id) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Sortable from "sortablejs";
+import { fetchList } from "@/api/article";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "DragTable",
+  inheritAttrs: false,
+});
+
+interface List {
+  id: number;
+  timestamp: number;
+  title: string;
+  pageviews: number;
+  status: string;
+}
+
+const listLoading = ref<boolean>(true);
+const list: Ref = ref<List[]>([]);
+const oldList = ref<List[]>([]);
+
+const formatDate = (timestamp) => {
+  const date = new Date(timestamp);
+  return date
+    .toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false,
+    })
+    .replace(/\//g, "-");
+};
+
+const statusType = (status: string) => {
+  const statusMap = {
+    published: "success",
+    draft: "info",
+    deleted: "danger",
+  };
+  return statusMap[status as keyof typeof statusMap];
+};
+
+// 行拖拽
+const rowDrag = function () {
+  // 要拖拽元素的父容器
+  const tbody = document.querySelector(
+    ".draggable .el-table__body-wrapper tbody"
+  );
+  Sortable.create(tbody, {
+    //  可被拖拽的子元素
+    draggable: ".draggable .el-table__row",
+    onEnd({ newIndex, oldIndex }) {
+      const currRow = list.value.splice(oldIndex, 1)[0];
+      list.value.splice(newIndex, 0, currRow);
+    },
+  });
+};
+
+onMounted(() => {
+  fetchList({}).then((res) => {
+    listLoading.value = false;
+    list.value = res.data.items;
+    oldList.value = list.value.map((v) => v.id);
+    rowDrag();
+  });
+});
+</script>
+
+<style>
+.sortable-ghost {
+  color: #fff !important;
+  background: #42b983 !important;
+  opacity: 0.8;
+}
+</style>
+
+<style scoped>
+.icon-star {
+  margin-right: 2px;
+}
+
+.drag-handler {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.show-d {
+  margin-top: 15px;
+}
+</style>

src/views/table/dynamic-table/components/FixedThead.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-checkbox-group v-model="checkboxVal">
+        <el-checkbox label="apple"> apple </el-checkbox>
+        <el-checkbox label="banana"> banana </el-checkbox>
+        <el-checkbox label="orange"> orange </el-checkbox>
+      </el-checkbox-group>
+    </div>
+
+    <el-table
+      :key="key"
+      :data="tableData"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="fruitName" width="180" />
+      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
+        <template #default="scope">
+          {{ scope.row[fruit] }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const defaultFormThead = ["apple", "banana"];
+const tableData = [
+  {
+    name: "fruit-1",
+    apple: "apple-10",
+    banana: "banana-10",
+    orange: "orange-10",
+  },
+  {
+    name: "fruit-2",
+    apple: "apple-20",
+    banana: "banana-20",
+    orange: "orange-20",
+  },
+];
+
+let key = 1; // table key
+const formTheadOptions = ["apple", "banana", "orange"];
+const checkboxVal = ref(defaultFormThead); // checkboxVal
+const formThead = ref(defaultFormThead); // 默认表头 Default header
+
+watch(checkboxVal, (valArr) => {
+  formThead.value = formTheadOptions.filter((i) => valArr.indexOf(i) >= 0);
+  key = key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
+});
+</script>

src/views/table/dynamic-table/components/UnfixedThead.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-checkbox-group v-model="formThead">
+        <el-checkbox label="apple"> apple </el-checkbox>
+        <el-checkbox label="banana"> banana </el-checkbox>
+        <el-checkbox label="orange"> orange </el-checkbox>
+      </el-checkbox-group>
+    </div>
+
+    <el-table
+      :data="tableData"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="fruitName" width="180" />
+      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
+        <template #default="scope">
+          {{ scope.row[fruit] }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const formThead = ref(["apple", "banana"]);
+
+const tableData = [
+  {
+    name: "fruit-1",
+    apple: "apple-10",
+    banana: "banana-10",
+    orange: "orange-10",
+  },
+  {
+    name: "fruit-2",
+    apple: "apple-20",
+    banana: "banana-20",
+    orange: "orange-20",
+  },
+];
+</script>

src/views/table/dynamic-table/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="app-container">
+    <div style="margin: 0 0 5px 20px">
+      Fixed header, sorted by header order,
+    </div>
+    <fixed-thead />
+
+    <div style="margin: 30px 0 5px 20px">
+      Not fixed header, sorted by click order
+    </div>
+    <unfixed-thead />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FixedThead from "./components/FixedThead.vue";
+import UnfixedThead from "./components/UnfixedThead.vue";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "DynamicTable",
+  inheritAttrs: false,
+});
+</script>