holyes-table 0.0.1 → 1.0.1

package/README.md

@@ -4,15 +4,30 @@
 
 ## 优化
 
-1.用div+grid布局, 每一行的行高是通过@chenglou-pretext计算的, 这样不会触发 ResizeObserver 导致重排。
-
-2.大数据时, 会通过worker线程计算高度，然后逐渐渲染最大高度，提升首次渲染性能。
-
-3.表格支持激活时，保持滚动条位置。
-
-4.影响滚动性能的自定义插槽，增加配置lazyLoadSlot=true，用于延迟加载插槽内容，增加滚动性能。
-
-5.支持表头分组
+1. 用div+grid布局, 每一行的行高是通过@chenglou-pretext计算的, 这样不会触发 ResizeObserver 导致重排。
+
+2. 大数据时, 会通过worker线程计算高度，然后逐渐渲染最大高度，提升首次渲染性能。
+
+3. 表格支持激活时，保持滚动条位置。
+
+4. 影响滚动性能的自定义插槽，增加配置lazyLoadSlot=true，用于延迟加载插槽内容，增加滚动性能。
+
+5. 支持:
+   - 横向/纵向虚拟滚动
+   - 排序(包括树结构)
+   - 筛选(包括树结构)
+   - 行高自适应
+   - 表头分组
+   - 自定义插槽(尽量少用，影响滚动性能；但支持懒加载插槽，滚动会更流畅；插槽需指定行高)
+   - 表尾行
+   - 树结构数据
+   - 展开行
+   - 内置一些常用插槽，性能更好，如
+     - a标签
+     - tag标签
+     - 图标
+     - 按钮组
+     - 开关
 
 ## 组件依赖
 
@@ -22,38 +37,67 @@
 
 ## 基本用法
 
+### 安装
+
+```bash
+pnpm i holyes-table
+```
+
+### 简单示例
+
 ```vue
 <template>
-  <PretextTable
-    ref="pertextTableRef"
+  <HolyesTable
+    ref="tableRef"
     :columns="columns"
     :height="400"
-    stripe
+    :stripe="true"
     :row-config="{ isCurrent: true, isHover: true }"
-  />
+    :showFooter="true"
+    :footerProps="footerProps"
+  ></HolyesTable>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const PretextTable = defineAsyncComponent(
-  () => import("@/components/pretextTable/pretextTable.vue")
-)
+import { ref,defineAsyncComponent } from 'vue'
+import HolyesTable, { HolyesTableColumnPropsType, HolyesTableFooterProps } from "holyes-table"
+
+const tableRef = ref()
 
-const columns = ref([
+/** 表格列配置 */
+const columns:HolyesTableColumnPropsType[] = [
   { field: 'name', title: '姓名', width: 100 },
   { field: 'age', title: '年龄', width: 80 },
   { field: 'address', title: '地址', width: 200 }
-])
+]
 
-const tableData = r[
+const tableData = [
   { name: '张三', age: 25, address: '北京市朝阳区' },
   { name: '李四', age: 30, address: '上海市浦东新区' }
 ]
 
-const pertextTableRef = ref()
+/** 表尾行属性配置 */
+const footerProps: HolyesTableFooterProps[] = [
+  // 表尾第一行
+  {
+    height: 30,
+    fieldTypes: [ // 表尾行字段类型, 顺序没有影响
+      {
+        field: "name",
+        type: "文本", // 文本, 会直接使用text属性
+        text: "小计"
+      },
+      {
+        field: "salary",
+        type: "合计", // 合计会自动计算
+        dataType: "number2"
+      }
+    ]
+  }
+]
 
 // 重新设置数据
-pertextTableRef.value.reloadData(tableData)
+tableRef.value.reloadData(tableData)
 
 </script>
 ```
@@ -62,7 +106,7 @@ pertextTableRef.value.reloadData(tableData)
 
 | 属性名 | 类型 | 默认值 | 说明 |
 | -------- | ------ | -------- | -------- |
-| columns | Array< PretextTableColumnPropsType> | [] | 表格列配置 |
+| columns | Array< HolyesTableColumnPropsType> | [] | 表格列配置 |
 | height | Number | - | 表格高度 |
 | cellMinHeight | Number | 22 | 单元格最小行高 |
 | loading | Boolean | false | 是否显示加载状态 |
@@ -73,16 +117,16 @@ pertextTableRef.value.reloadData(tableData)
 | stripe | Boolean | true | 是否显示斑马纹背景 |
 | showOverflow | String | "" | 是否显示溢出内容，可选值：title/tooltip/ellipsis/空 |
 | showFooter | Boolean | false | 是否显示表尾行 |
-| footerProps | Array< PretextTableFooterProps> | [] | 表尾行属性配置 |
-| treeConfig | PretextTableTreeConfig | {} | 树形结构配置项，详见下方说明 |
-| expandConfig | PretextTableExpandConfig | {} | 展开行配置项，详见下方说明 |
+| footerProps | Array< HolyesTableFooterProps> | [] | 表尾行属性配置 |
+| treeConfig | HolyesTableTreeConfig | {} | 树形结构配置项，详见下方说明 |
+| expandConfig | HolyesTableExpandConfig | {} | 展开行配置项，详见下方说明 |
 
 ### 列配置说明 (columns)
 
 列配置是表格的核心配置，支持以下属性：
 
 ```typescript
-interface PretextTableColumnPropsType {
+interface HolyesTableColumnPropsType {
   /** 字段名 */
   field: string
   /** 列标题 */
@@ -101,8 +145,8 @@ interface PretextTableColumnPropsType {
   style?: any
   /** 筛选配置 */
   isFilter?: {
-    type: PretextTableFilterType
-    listOptions?: { label: string; value: PretextTableFilterlistOptions }[]
+    type: HolyesTableFilterType
+    listOptions?: { label: string; value: HolyesTableFilterlistOptions }[]
   }
   /** 是否可调整宽度 */
   resizable?: boolean
@@ -203,7 +247,7 @@ interface PretextTableColumnPropsType {
   /** 表尾配置 */
   footer?: any[]
   /** 子列（表头分组） */
-  children?: PretextTableColumnPropsType[]
+  children?: HolyesTableColumnPropsType[]
 }
 ```
 
@@ -258,7 +302,7 @@ const columns = [
 ### 树形结构配置 (treeConfig)
 
 ```typescript
-interface PretextTableTreeConfig {
+interface HolyesTableTreeConfig {
   /** 是否开启展开行功能 */
   isOpenTree: boolean
   /** 自动将列表转为树结构 */
@@ -302,7 +346,7 @@ const treeConfig = {
 ### 展开行配置 (expandConfig)
 
 ```typescript
-interface PretextTableExpandConfig {
+interface HolyesTableExpandConfig {
   /** 是否开启展开行功能 */
   isExpand: boolean
   /** 展开行高度 (像素), 必填 */
@@ -333,12 +377,12 @@ const expandConfig = {
 
 | 事件名 | 参数 | 说明 |
 | -------- | ------ | -------- |
-| headerCellClick | (column: PretextTableColumnPropsType) | 点击表头单元格 |
-| cellClick | (row: any, column: PretextTableColumnPropsType) | 点击单元格 |
+| headerCellClick | (column: HolyesTableColumnPropsType) | 点击表头单元格 |
+| cellClick | (row: any, column: HolyesTableColumnPropsType) | 点击单元格 |
 | currentChange | (currentRow: any, oldCurrentRow: any) | 当前行变化 |
 | checkboxChange | (checked: boolean, row: any) | 多选列变化 |
 | checkboxAll | (checked: boolean) | 多选列全选 |
-| resizableChange | (column: PretextTableColumnPropsType, width: number) | 列调整宽度 |
+| resizableChange | (column: HolyesTableColumnPropsType, width: number) | 列调整宽度 |
 | toggleRowExpand | (rows: any[], expanded: boolean) | 展开/收起行 |
 
 ## Methods 方法
@@ -362,7 +406,7 @@ const expandConfig = {
 
 ```vue
 <template>
-  <PretextTable
+  <HolyesTable
     ref="pretextTableRef"
     :columns="columns"
     :data="tableData"
@@ -443,7 +487,7 @@ const setExpandRow = (row,expanded: boolean) => {
 ### 自定义插槽
 
 ```vue
-<PretextTable
+<HolyesTable
   :columns="columns"
   :data="tableData"
 >
@@ -466,7 +510,7 @@ const setExpandRow = (row,expanded: boolean) => {
   <template #status_footer="{ column }">
     <span>123</span>
   </template>
-</PretextTable>
+</HolyesTable>
 
 <script setup>
 const columns = [