From 504572647a6b4b894cc96634b9136889daff171d Mon Sep 17 00:00:00 2001
From: hechang27 <hechang27@outlook.com>
Date: Wed, 25 Mar 2026 06:07:41 +0000
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20'el-table/el-table-v2=20?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E9=AB=98=E5=BA=A6'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...%AA%E9%80%82%E5%BA%94%E9%AB%98%E5%BA%A6.md | 316 ++++++++++++++++++
 1 file changed, 316 insertions(+)
 create mode 100644 el-table%2Fel-table-v2-%E8%87%AA%E9%80%82%E5%BA%94%E9%AB%98%E5%BA%A6.md

diff --git a/el-table%2Fel-table-v2-%E8%87%AA%E9%80%82%E5%BA%94%E9%AB%98%E5%BA%A6.md b/el-table%2Fel-table-v2-%E8%87%AA%E9%80%82%E5%BA%94%E9%AB%98%E5%BA%A6.md
new file mode 100644
index 0000000..610c220
--- /dev/null
+++ b/el-table%2Fel-table-v2-%E8%87%AA%E9%80%82%E5%BA%94%E9%AB%98%E5%BA%A6.md
@@ -0,0 +1,316 @@
+el-table:
+```vue
+<script setup lang="ts">
+import { ref, version as vueVersion } from 'vue'
+import { version as epVersion } from 'element-plus'
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-08',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },{
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },{
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },{
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },{
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },{
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },{
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },{
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },{
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+]
+</script>
+
+<template>
+  <div class="main">
+    <div class="header" />
+    <div class="wrap">
+      <div class="wrap_top">
+        <div>{{'element-plus:'+epVersion}}</div>
+        <div>{{'vue:'+vueVersion}}</div>
+      </div>
+      <div class="wrap_table">
+        <el-table :data="tableData" height="0">
+          <el-table-column prop="date" label="Date" width="150" />
+          <el-table-column prop="name" label="Name" width="120" />
+          <el-table-column prop="state" label="State" width="120" />
+          <el-table-column prop="city" label="City" width="320" />
+          <el-table-column prop="address" label="Address" width="600" />
+          <el-table-column prop="zip" label="Zip" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.main {
+  display: flex;
+  height: 100vh;
+  max-height: 100vh;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.header {
+  background-color: red;
+  width: 100%;
+  height: 100px;
+}
+
+.wrap {
+  flex: 1;
+  background-color: antiquewhite;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid antiquewhite;
+  overflow: hidden;
+}
+
+.wrap_top {
+  height: 100px;
+  background-color: chocolate;
+  text-align: center;
+}
+
+.wrap_table {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.el-table {
+  height: 100%!important;
+  display: flex;
+  flex-direction: column;
+}
+
+.el-table__inner-wrapper {
+  height: 100%!important;
+}
+</style>
+```
+
+el-table-v2:
+```vue
+<template>
+  <div :style="{...rootStyle, height: '100vh'}">
+    <div style="flex-grow: 1;">
+      <el-auto-resizer>
+      <template #default="{ height, width }">
+          <el-table-v2
+            :columns="columns"
+            :data="data"
+            :width="width"
+            :height="height"
+            fixed
+          />
+        </template>
+      </el-auto-resizer>
+    </div>
+    <div class="footer" style="height: 200px; background-color: red;" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { StyleValue } from 'vue'
+
+const rootStyle: StyleValue = {
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+}
+
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = 'row-'
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
+        return rowData
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null,
+      }
+    )
+  })
+
+const columns = generateColumns(10)
+const data = generateData(columns, 200)
+</script>
+```
\ No newline at end of file