Merge pull request #39 from surely-vue/feat-auto-header-height

feat: add autoHeaderHeight #32

package.json

@@ -1,6 +1,6 @@
 {
   "name": "surely-vue",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "scripts": {
     "predev": "node node_modules/esbuild/install.js",
     "dev": "yarn predev && vite",

src/demo/basic/auto-header-height.vue

@@ -0,0 +1,106 @@
+<docs>
+---
+order: 0
+title:
+  en-US: Auto Header Height
+  zh-CN: 自动表头高度
+---
+
+## zh-CN
+
+当自动表头高度时，表头部分会降级到全量渲染，如果你有很多很多很多列，全量渲染对表格性能有一定的影响
+
+> 拖动第一列查看效果吧
+
+## en-US
+
+When the height of the header is automatic, the header part will be downgraded to full rendering. 
+
+If you have many, many columns, full rendering will have a certain impact on table performance.
+
+> Drag the first column to see the effect
+
+</docs>
+
+<template>
+  <s-table
+    :columns="columns"
+    :data-source="dataSource"
+    :scroll="{ y: 400, x: 2000 }"
+    :pagination="false"
+    auto-header-height
+  >
+    <template #bodyCell="{ column }">
+      <template v-if="column.key === 'operation'">
+        <a>Action</a>
+      </template>
+    </template>
+  </s-table>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+interface DataItem {
+  key: number;
+  name: string;
+  age: number;
+  address: string;
+}
+
+export default defineComponent({
+  setup() {
+    const columns = [
+      {
+        title: 'Full NameFull NameFull Name',
+        dataIndex: 'name',
+        fixed: 'left',
+        width: 150,
+        resizable: true,
+      },
+      {
+        title: 'Age',
+        dataIndex: 'age',
+        fixed: 'left',
+        width: 100,
+      },
+      {
+        title: 'Column 1',
+        dataIndex: 'address',
+      },
+      {
+        title: 'Column 2',
+        dataIndex: 'address',
+      },
+      {
+        title: 'Column 3',
+        dataIndex: 'address',
+      },
+      {
+        title: 'Column 4',
+        dataIndex: 'address',
+      },
+      { title: 'Column 5', dataIndex: 'address' },
+      {
+        title: 'Action',
+        key: 'operation',
+        fixed: 'right',
+        width: 100,
+      },
+    ];
+    const data: DataItem[] = [];
+    for (let i = 0; i < 1000; i++) {
+      data.push({
+        key: i,
+        name: `Edrward ${i}`,
+        age: i + 1,
+        address: `London Park no. ${i}`,
+      });
+    }
+    return {
+      dataSource: ref(data),
+      columns: ref(columns),
+    };
+  },
+});
+</script>

src/demo/basic/index.vue

@@ -13,6 +13,7 @@
     <ajax />
     <scroll />
     <tooltip />
+    <autoHeaderHeightVue />
   </div>
 </template>
 <script lang="ts">
@@ -30,6 +31,7 @@ import heightVue from './height.vue';
 import ajax from './ajax.vue';
 import scroll from './scroll.vue';
 import tooltip from './tooltip.vue';
+import autoHeaderHeightVue from './auto-header-height.vue';
 export default defineComponent({
   title: '基本用法',
   enTitle: 'Basic',
@@ -100,6 +102,11 @@ export default defineComponent({
       title: 'Tooltip 自定义提示',
       enTitle: 'Tooltip',
     },
+    {
+      id: 'auto-header-height',
+      title: '自动表头高度',
+      enTitle: 'Auto Header Height',
+    },
   ],
   components: {
     Sticky,
@@ -115,6 +122,7 @@ export default defineComponent({
     ajax,
     scroll,
     tooltip,
+    autoHeaderHeightVue,
   },
   setup() {
     return {};

src/demo/dragable/columns.vue

@@ -11,11 +11,14 @@ title:
 设置 `resizable = true`, 可以将列变成可拖拽改变宽度的列，通过设置 minWidth、maxWidth 控制列宽的最小宽度和最大宽度，当然这都是可选的配置。
 当有些列没有设置 width 时，该列将会是自动伸缩，其它可拖拽的列大小改变时，会重新计算自动伸缩列的宽度。
 
+注意：仅支持叶子结点拖拽
+
 ## en-US
 
 Set `resizable = true`, you can turn the column into a column that can be dragged to change the width. By setting minWidth and maxWidth, you can control the minimum and maximum width of the column width. Of course, this is an optional configuration.
 When some columns are not set to width, the column will be automatically stretched. When the size of other draggable columns is changed, the width of the automatically stretched column will be recalculated.
 
+Note: Only leaf node dragging is supported
 </docs>
 
 <template>

src/demo/dragable/index.vue

@@ -5,7 +5,7 @@
         拖拽是一个很酷的功能，但你要知道当用户刷新或重新获取数据后，状态会被重置，除非你做了相应的缓存
       </h3>
       <ul>
-        <li>列宽拖拽：设置 minWidth 和 maxWidth 是一个不错的建议</li>
+        <li>列宽拖拽：仅支持叶子结点拖拽；设置 minWidth 和 maxWidth 是一个不错的建议</li>
         <li>行拖拽：注意合并行的处理，或者通过使用函数形式的 rowDrag 属性，禁止该行的拖拽功能</li>
         <li>列拖拽：固定列和非固定列之间不可以互相拖拽；分组表头暂时只支持第一级拖拽。</li>
         <li>树结构：父节点无法一次拖拽直接成为子节点的子节点，当然你可以自定义处理逻辑;</li>

src/demo/performance/index.vue

@@ -4,6 +4,7 @@
       <h3>如果你发现你的表格依然不够流畅，可以尝试从如下几个点进行进一步的排查和优化：</h3>
       <ul>
         <li>首先确保虚拟滚动是否生效</li>
+        <li>开启自动表头高度，表头部分会全量加载，会有一定的性能损耗</li>
         <li>
           单元格内容是否过于复杂，虚拟滚动是减少 DOM
           渲染来达到页面流畅的，如果您的每一个单元格都是很复杂的节点(成百上千的DOM），那么表格很难流畅滚动

src/doc/api.en-US.md

@@ -4,6 +4,7 @@
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| autoHeaderHeight | Whether the height of the header is automatic, after it is turned on, the header part will be loaded in full, and there is a certain performance loss | boolean | false | 2.3 |
 | bordered | Whether to show all table borders | boolean | `false` |  |
 | childrenColumnName | The column contains children to display | string | `children` |  |
 | columns | Columns of table [config](#column) | array | - |  |
@@ -120,7 +121,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | title | Title of this column | string | - |  |
 | minWidth | Drag the minimum width of the column, it will be affected by the automatic adjustment and distribution of the table width | number | 50 |  |
 | maxWidth | Drag the maximum width of the column, it will be affected by the automatic adjustment and distribution of the table width | number | - |  |
-| resizable | Whether the width can be adjusted by dragging, at this time width must be number type | boolean | - |  |
+| resizable | Whether the width can be adjusted by dragging, at this time width must be number type. Only support leaf node | boolean | - |  |
 | width | Width of this column | string\|number | - |  |
 | customCell | Set props on per cell | Function(obj: {record: any; rowIndex: number; column: ColumnType}) | - |  |
 | customHeaderCell | Set props on per header cell | Function(column) | - |  |

src/doc/api.zh-CN.md

@@ -5,6 +5,7 @@
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | animateRows | 是否开启动画 | boolean | true |  |
+| autoHeaderHeight | 是否自动表头高度，开启后会全量加载表头部分，有一定的性能损耗 | boolean | false | 2.3 |
 | bordered | 是否展示外边框和列边框 | boolean | false |  |
 | columns | 表格列的配置描述，具体项见[下表](#column) | array | - |  |
 | childrenColumnName | 指定树形结构的列名 | string | `children` |  |
@@ -122,7 +123,7 @@
 | width | 列宽度 | string\|number | - |  |
 | minWidth | 拖动列最小宽度，会受到表格自动调整分配宽度影响 | number | 50 |  |
 | maxWidth | 拖动列最大宽度，会受到表格自动调整分配宽度影响 | number | - |  |
-| resizable | 是否可拖动调整宽度，此时 width 必须是 number 类型 | boolean | - |  |
+| resizable | 是否可拖动调整宽度，此时 width 必须是 number 类型, 仅支持叶子结点 | boolean | - |  |
 | customCell | 设置单元格属性 | Function(obj: {record: any; rowIndex: number; column: ColumnType}) | - |  |
 | customHeaderCell | 设置头部单元格属性 | Function(column) | - |  |
 | onFilter | 本地模式下，确定筛选的运行函数, 使用 template 或 jsx 时作为`filter`事件使用 | Function | - |  |