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

Former-commit-id: 0c0746cc6a9e5f67dc2caf52c4990bec844e4d9a

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>