holyes-table 1.0.11 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -2
- package/dist/index.mjs +304 -283
- package/dist/lib/pretextTable/hook/useCheckbox.d.ts +1 -1
- package/dist/lib/pretextTable/pretextTable.vue.d.ts +1 -1
- package/dist/lib/pretextTable/type.d.ts +8 -2
- package/dist/lib/pretextTable/useHolyesTable.d.ts +1 -1
- package/package.json +3 -2
- package//346/233/264/346/226/260/346/227/245/345/277/227.md +37 -0
package/README.md
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
这个基于Canvas计算行高的虚拟滚动表格组件。
|
|
4
4
|
|
|
5
|
+
## 目录
|
|
6
|
+
|
|
7
|
+
- [优化](#优化)
|
|
8
|
+
- [组件依赖](#组件依赖)
|
|
9
|
+
- [基本用法](#基本用法)
|
|
10
|
+
- [安装](#安装)
|
|
11
|
+
- [简单示例](#简单示例)
|
|
12
|
+
- [Props 属性](#props-属性)
|
|
13
|
+
- [列配置说明 (columns)](#列配置说明-columns)
|
|
14
|
+
- [树形结构配置 (treeConfig)](#树形结构配置-treeconfig)
|
|
15
|
+
- [展开行配置 (expandConfig)](#展开行配置-expandconfig)
|
|
16
|
+
- [Emits 事件](#emits-事件)
|
|
17
|
+
- [Methods 方法](#methods-方法)
|
|
18
|
+
- [方法使用示例](#方法使用示例)
|
|
19
|
+
- [插槽使用](#插槽使用)
|
|
20
|
+
- [自定义插槽](#自定义插槽)
|
|
21
|
+
- [默认插槽类型](#默认插槽类型)
|
|
22
|
+
- [注意事项](#注意事项)
|
|
23
|
+
|
|
5
24
|
## 优化
|
|
6
25
|
|
|
7
26
|
1. 用div+grid布局, 每一行的行高是通过Canvas计算的, 这样不会触发重排。
|
|
@@ -363,12 +382,15 @@ interface HolyesTableTreeConfig {
|
|
|
363
382
|
|
|
364
383
|
```javascript
|
|
365
384
|
const treeConfig = {
|
|
385
|
+
isOpenTree: true, // 开启树形结构
|
|
366
386
|
transform: true, // 自动将列表转为树结构
|
|
387
|
+
idField: 'id', // 节点id字段, 保留展开状态时必填
|
|
367
388
|
parentField: 'parentId', // 父节点字段
|
|
368
389
|
childrenField: 'children', // 子节点字段
|
|
369
390
|
indent: 20, // 缩进像素
|
|
370
391
|
trigger: 'default', // 点击按钮触发展开/收起
|
|
371
392
|
showIcon: true // 显示树形图标
|
|
393
|
+
reserve: false // 保留展开状态
|
|
372
394
|
}
|
|
373
395
|
```
|
|
374
396
|
|
|
@@ -422,7 +444,7 @@ const expandConfig = {
|
|
|
422
444
|
| -------- | ------ | -------- | -------- |
|
|
423
445
|
| reloadData | `(data: any[])` | `Promise<void>` | 重新设置表格数据 |
|
|
424
446
|
| getTableData | `()` | `{ fullData, visibleData }` | 获取表格数据（包含全部数据、当前可见数据） |
|
|
425
|
-
| getCheckboxRecords | `()` | `any[]` |
|
|
447
|
+
| getCheckboxRecords | `(isFull: boolean, field?: string)` | `any[]` | 获取所有选中的行数据,isFull 为false时, 只获取当前可见数据的选中行; field 为选中列字段, 默认第一个选中列字段 |
|
|
426
448
|
| clearCheckboxRow | `()` | `void` | 清空多选列选中状态 |
|
|
427
449
|
| updateFooter | `()` | `void` | 更新表尾行数据 |
|
|
428
450
|
| updateFooterCellLabel | `(field: string, rowIndex: number, label: string)` | `void` | 更新表尾单元格文本 |
|
|
@@ -469,7 +491,7 @@ const getTableData = () => {
|
|
|
469
491
|
|
|
470
492
|
/** 获取所有选中的行数据 */
|
|
471
493
|
const getCheckboxRecords = () => {
|
|
472
|
-
const selectedRows = pretextTableRef.value?.getCheckboxRecords() || []
|
|
494
|
+
const selectedRows = pretextTableRef.value?.getCheckboxRecords(true, 'checkbox') || []
|
|
473
495
|
console.log('选中的行:', selectedRows)
|
|
474
496
|
}
|
|
475
497
|
|