主题
treeTable 树表格
使用
import { KTreeTable } from "@ksware/ksw-ux";提示
1.由于TreeTable组件基于现有业务场景对部分vxe-table导出的API进行了修改，因此建议直接通过ref调用表格实例导出的API，而不是通过tableInstance对象调用；（对于vxe-table中未二次封装的API，使用ref实例调用同样有效）
2.为了兼容原有项目的写法，组件库仍保留了tableInstance对象的有效性，此时通过tableInstance调用的方法为vxe-table底层的API而非组件库二次封装后的API；
基础用法
表格默认开启分页功能，可通过设置show-page为 false 关闭分页功能。
分页配置
通过配置pagination-config属性可以对分页功能进行配置，具体配置项可参考 PaginationConfig。
提示
该组件基于vxe-table开发，部分重复或未修改的属性不在此过多赘述，如需查看请移步 vxe-table api 查看。
API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 表格数据 | Array | - |
| column | 表格列配置 | Array | - |
| size | 表格大小 | enum | - |
| height | 表格高度 | number | string | 100% |
| use-tree | 是否使用树形表格 | boolean | false |
| show-description | 表格数据描述，包含筛选条件、统计等内容 | boolean | true |
| show-header-tools | 是否显示表头工具栏 | boolean | true |
| show-batch-operation | 是否显示批量操作（启用复选框时生效） | boolean | false |
| show-page | 是否显示分页 | boolean | true |
| show-column-menu | 是否显示列头菜单 | boolean | false |
| batch-operations | 批量操作配置 | Array | - |
| cell-click-toggle-high-light | 单元格单击是否高亮/取消高亮状态切换 | boolean | true |
| show-search-input | 是否显示搜索框 | boolean | true |
| show-filter | 是否显示筛选功能按钮 | boolean | true |
| show-refresh | 是否显示刷新按钮 | boolean | true |
| show-transfer | 是否显示列头控制穿梭框 | boolean | false |
| widgets | 自定义表头组件，设置该参数时，show-search-input、show-filter、show-refresh、show-transfer参数将失效,该参数数组提供了search、filter、refresh、transfer、size-control、card-switch (v1.2.1) 字段用于搜索框、高级筛选、刷新、列头控制器、表格大小控制器以及卡片切换等内置组件的显示与顺序，此外还可以自定义组件，参数的 id 字段用于标识组件， widget 字段用于渲染组件，当 widget 字段为 null 时，会自动渲染名为 id 的插槽 | Array | - |
| advanced-filter-config | 高级筛选配置 | object | - |
| pagination-config | 分页配置 | object | - |
| search-config | 搜索配置 | object | - |
| seq-config | 序号配置项 | object | - |
| simple | 是否开启简易模式，该模式下只保留表格主体与搜索功能，其他功能均隐藏，搜索功能也可以通过show-search-input参数控制显示/隐藏 | boolean | false |
| default-transfer-data | 默认的列头控制穿梭框数据 | Array | - |
| on-transfer-show | 列头控制穿梭框显示时回调 | Function | - |
| on-transfer-hide | 列头控制穿梭框隐藏时回调 | Function | - |
| on-transfer-change | 列头控制穿梭框隐藏时如果数据发生变化时则执行回调 | Function | - |
| on-advanced-filter-show | 高级筛选显示时回调 | Function | - |
| on-advanced-filter-hide | 高级筛选关闭时的回调 | Function | - |
| use-ant-style | 是否使用 ant-design 样式 | boolean | false |
| has-space | 是否使用 hasSpace 样式 | boolean | false |
| round | 是否使用 round 样式 | boolean | false |
| adaptive | 是否自适应内容高度 | boolean | false |
| sort-config | 排序配置 | object | - |
| row-config | 行配置 | object | - |
| edit-config | 编辑配置 | object | - |
| scroll-Y | 纵向滚动配置 | object | - |
| column-config | 列配置 | object | - |
| checkbox-config | 复选框配置 | object | - |
| tree-config | 树形结构配置 | object | - |
| show-overflow | 是否显示单元格内容溢出tip | string | boolean | - |
| auto-resize | 是否自动调整列宽 | boolean | true |
| align | 表格内容对齐方式 | string | - |
| border | 表格边框 | boolean | string | default |
| empty-text | 空数据时显示文字 | string | - |
| row-style | 行样式 | object | - |
| show-size-control | 是否显示表格尺寸控制器 | boolean | false |
| request-method 1.1.20 | 自定义远程请求方法，开启远程分页、搜索、筛选任意一项时，该方法将生效 | Function | - |
| batch-operate-config 1.1.22 | 批量操作配置 | object | - |
| card-options 1.2.1 | 表格使用卡片展示风格时生效，配置卡片的属性，可参考KCard组件 | object | - |
| default-mode 1.2.1 | 表格使用卡片展示风格时生效，配置默认展示模式 | object | 'list' |
| transfer-config 1.2.1 | 表头控制器配置 | object | - |
| clear-current-by-click 1.2.2 | 点击表格内部非单元格区域时是否清除当前行高亮状态 | boolean | false |
Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| refresh | 刷新表格数据 | Function |
| remote-query | 远程搜索表格数据 | Function |
| server-paging | 服务端分页 | Function |
| highlight-clear | 清除高亮状态时触发 | Function |
| highlight-change | 高亮状态变化时触发 | Function |
| cell-click | 单元格单击时触发 | Function |
| hide-column | 隐藏列时触发 | Function |
| checkbox-all | 用于type=checkbox, 全选时触发 | Function |
| checkbox-change | 用于type=checkbox, 选中项变化时触发 | Function |
| sort-change | 排序变化时触发 | Function |
| advanced-filter-confirm | 确认高级筛选条件时触发 | Function |
| advanced-filter-clear | 清除高级筛选条件时触发 | Function |
| page-current-change | 用于分页场景，当前页变化时触发 | Function |
| page-size-change | 用于分页场景，当前分页大小变化时触发 | Function |
| page-change | 用于分页场景，页码变化时触发 | Function |
| prev-click | 用于分页场景，点击上一页按钮时触发 | Function |
| next-click | 用于分页场景，点击下一页按钮时触发 | Function |
Column
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 列头显示文字 | string | - |
| field | 列字段名 | string | - |
| width | 列宽度 | number | string | - |
| minWidth | 最小列宽度 | number | string | - |
| treeNode | useTree=true时有效，指定树节点列 | boolean | - |
| sortable | 是否可排序 | boolean | false |
| showIcon | 是否显示图标 | boolean | false |
| visible | 是否显示该列 | boolean | true |
| showColumnMenu | 是否显示列头菜单 | boolean | false |
| group | 用于多级表头分组，参数配置与列配置一致 | Column[] | - |
| render | 自定义渲染函数 | Function | - |
| renderEdit | 自定义渲染编辑单元格函数 | Function | - |
| dataType | 数据类型 | enum | - |
| format | 用于高级筛选展示日期的格式化字段，如果未设置，则默认使用 valueFormat 的格式化字段 | string | - |
| valueFormat | 用于高级筛选的绑定值格式化字段 | string | - |
| allowChangeVisible | 是否允许修改列的可见状态 | boolean | true |
| logics | 用于高级筛选自定义逻辑符列表 | Array | - |
| ignoreCase | 使用搜索和筛选功能时生效，是否忽略大小写 | boolean | false |
SearchConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| strict | 是否精确搜索，只搜索与关键词完全一致的内容 | boolean | false |
| isRemoteQuery | 是否远程搜索 | boolean | false |
| ignoreCase | 是否忽略大小写 | boolean | false |
| searchColumns | 允许指定搜索属性名,只对该参数指定的列进行搜索 | string[] | - |
| supportPinYin | 允许指定拼音搜索列,输入值为表格列配置的field,只有指定列才会进行搜索，为true时，会搜索所有数据 | boolean | string[] | false |
| placeholder | 搜索框占位符 | string | - |
| isEvery | 使用树形表格时生效，是否搜索目标节点的子节点时只返回符合条件的子节点，默认返回所有子节点 | boolean | false |
| searchMethod | 自定义搜索方法，入参包含当前行数据和搜索关键字，返回 true 时表示匹配成功，否则失败 | Function | (params: SearchMethodParams) => Boolean |
AdvancedFilterConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| filterAll | 是否筛选所有数据，为 false 时只筛选column.visible=true的数据 | boolean | true |
| exclude | 排除项, 与column.field相同, 该参数包含的列不参与高级筛选 | string[] | - |
| remote | 启用远程筛选， 为true时所有条件将通过远程接口进行查询， 也可以为数组，指定远程筛选的列 | boolean | string[] | false |
| dateFormat | 日期格式 | string | YYYY-MM-DD HH:mm:ss |
| filterColumns | 自定义列筛选条件 | object | - |
| ignoreCase | 是否忽略大小写 | boolean | false |
| defaultCondition | 默认筛选条件 | object | - |
| isEvery | 使用树形表格时生效，是否筛选目标节点的子节点时只返回符合条件的子节点，默认返回所有子节点 | boolean | false |
TablePaginationConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| total | 总条数 | number | - |
| pageSize | 每页条数 | number | - |
| pageSizes | 每页条数选项 | number[] | - |
| currentPage | 当前页数 | number | - |
| pageCount | 总页数 | number | - |
| layout | 分页布局 | enum | - |
| isRemotePaging | 是否服务端分页 | boolean | false |
SeqConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| startIndex | 序号起始值 | number | 1 |
| seqMethod | 自定义序号方法 | Function | - |
TransferConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| showSearch | 是否显示搜索框 | boolean | true |
| excludes | 排除项, 与column.field相同, 表头控制器中不显示该参数包含项 | string[] | - |
| drag | 是否允许拖拽排序 | boolean | true |
RequestConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| immediate | 使用远程数据时生效，首次加载表格时是否调用 request-method 方法 | boolean | true |
Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| tableInstance | vxe表格实例 | object |
| filter | 搜索框数据筛选，可传入一个字符串参数作为搜索条件，不传时恢复全部数据 | Function |
| clearSearch | 清除搜索条件 | Function |
| advancedFilter | 高级筛选 | Function |
| clearAdvancedFilter | 清除高级筛选条件 | Function |
| getAdvancedCondition | 获取高级筛选条件 | Function |
| disposeRowTooltip | 销毁单元格溢出行的文字提示 | Function |
| getHeaderControllerData | 获取表头控制器数据 | Function |
| setHeaderControllerData | 设置表头控制器数据 | Function |
| getVisibleData | 获取当前表格可见数据 | Function |
| clearTableStatus | 清除表格状态 | Function |
| resetPagination | 重置分页状态，调用该方法后会将当前的分页状态重置为表格首次加载时的状态 | Function |
| refreshTableData | 刷新表格数据，可传入一个布尔值参数，默认值为 false ，为 true 时在刷新表格数据的同时会清除表格状态 | Function |
Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| [column.field] | 自定义该列单元格内容 | object |
| [column.field]-header | 自定义该列列头内容 | object |
| [column.field]-edit | 自定义单元格渲染列内容 | object |
| [column.field]-label | 自定义该列单元格文本内容（当单元格设置 icon 时，使用该插槽只会替换文本内容，不会替换图标 ） | object |
| empty | 自定义空数据时显示的内容 | - |
| loading | 自定义加载中时显示的内容 | - |
| description | 自定义表格数据描述内容 | object |
| filter-trigger | 自定义高级筛选触发按钮 | object |
| transfer-trigger | 自定义列头控制穿梭框触发按钮 | - |
| size-control-trigger | 自定义表格大小切换触发按钮 | - |
| row-drag-icon | 自定义行拖拽图标 | - |
| column-drag-icon | 自定义列拖拽图标 | - |
| card-header | default-mode 为 card 时生效，自定义卡片头部内容 | - |
| card-content | default-mode 为 card 时生效，自定义卡片内容 | - |
| card-footer | default-mode 为 card 时生效，自定义卡片底部内容 | - |
| header-extra 1.1.23 | 自定义表头额外内容，在表头下方显示 | - |
| header-extra 1.1.23 | 自定义表头额外内容，在表头下方显示 | - |
| [column.field]-field 1.1.23 | 与插槽[column.field]作用一致，自定义该列单元格内容，当 field 与插槽名冲突时，可使用该插槽，优先级高于插槽[column.field] | - |