主题
treeTable 卡片风格切换
使用
提示
1.由于TreeTable组件基于现有业务场景对部分vxe-table导出的API进行了修改，因此建议直接通过ref调用表格实例导出的API，而不是通过tableInstance对象调用；（对于vxe-table中未二次封装的API，使用ref实例调用同样有效）
2.为了兼容原有项目的写法，组件库仍保留了tableInstance对象的有效性，此时通过tableInstance调用的方法为vxe-table底层的API而非组件库二次封装后的API；
卡片风格切换
TreeTable组件提供了卡片风格的切换，通过配置 widgets：['card-switch'] 使用内置的卡片风格切换功能，实现表格/卡片风格的切换。
注意
1.切换为卡片展示后，所有与表格相关操作的的api 和 slot 均失效（分页、搜索、高级筛选、刷新功能仍能正常使用），请使用 card-content、card-header 和 card-footer 插槽来控制卡片的展示内容。 2.卡片风格基于 card 组件实现，可通过 props.cardOptions 配置卡片的参数，具体请参考 card 组件的 API。
提示
由于这个组件是基于Vxe-Table开发，他的原始属性未被更改，故不在此重复。请跳转查看原组件的相应文档。
API
TreeTable Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 表格数据 | Array | - |
| column | 表格列配置 | Array | - |
| size | 表格大小 | string | - |
| height | 表格高度 | number | string | 100% |
| use-tree | 是否使用树形表格 | boolean | false |
| is-remote-query | 是否远程搜索表格数据 | boolean | false |
| is-server-paging | 是否服务端分页 | boolean | false |
| show-description | 表格数据描述，包含筛选条件、统计等内容 | boolean | true |
| show-header-tools | 是否显示表头工具栏 | boolean | true |
| show-batch-operation | 是否显示批量操作（只在type=checkbox时有效） | 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<{label: string, key: string, disabled: boolean, visible: boolean}> | 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 | 行样式 | CSSProperties | ((rowInfo: Row) => CSSProperties) | - |
| show-size-control | 是否显示表格尺寸控制器 | boolean | false |
| request-method | 自定义远程请求方法，开启远程分页、搜索、筛选任意一项时，该方法将生效 | Function | - |
| batch-operate-config | 批量操作配置 | object | - |
| card-options | 表格使用卡片展示风格时生效，配置卡片的属性，可参考KCard组件 | object | - |
| default-mode | 表格使用卡片展示风格时生效，配置默认展示模式 | object | 'list' |
TreeTable 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 | 用于show-page为true，当前页变化时触发 | Function |
| page-size-change | 用于show-page为true，当前分页大小变化时触发 | Function |
| page-change | 用于show-page为true，页码变化时触发 | Function |
| prev-click | 用于show-page为true，点击上一页按钮时触发 | Function |
| next-click | 用于show-page为true，点击下一页按钮时触发 | 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 | - |
SearchConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| strict | 是否精确搜索 | boolean | false |
| searchMethod | 自定义搜索方法 | Function | - |
| isRemoteQuery | 是否远程搜索 | boolean | false |
| ignoreCase | 是否忽略大小写 | boolean | false |
| searchColumns | 允许指定搜索属性名,只对该参数指定的属性进行搜索 | string[] | - |
| supportPinYin | 允许指定拼音搜索列,输入值为表格列配置的field,只有指定列才会进行搜索，为true时，会搜索所有数据 | boolean | string[] | false |
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 | - |
PaginationConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| total | 总条数 | number | - |
| pageSize | 每页条数 | number | - |
| pageSizes | 每页条数选项 | number[] | - |
| currentPage | 当前页数 | number | - |
| pageCount | 总页数 | number | - |
| layout | 分页布局 | enum | - |
| isRemotePaging | 是否服务端分页 | boolean | false |
SeqConfig
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| startIndex | 序号起始值 | number | 1 |
| seqMethod | 自定义序号方法 | Function | - |
TreeTable Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| tableInstance | vxe表格实例 | object |
| filter | 搜索框数据筛选 | Function |
| clearSearch | 清除搜索条件 | Function |
| advancedFilter | 高级筛选 | Function |
| clearAdvancedFilter | 清除高级筛选条件 | Function |
| getAdvancedCondition | 获取高级筛选条件 | Function |
| disposeRowTooltip | 销毁单元格溢出行的文字提示 | Function |
| getHeaderControllerData | 获取表头控制器数据 | Function |
| setHeaderControllerData | 设置表头控制器数据 | Function |
TreeTable Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| [column.field] | 自定义该列单元格内容 | object |
| [column.field]-header | 自定义该列列头内容 | object |
| [column.field]-edit | 自定义单元格渲染列内容 | object |
| [column.field]-label | 自定义该列单元格文本内容（当单元格设置icon时，使用该插槽只会替换文本内容，不会替换icon） | object |
| empty | 自定义空数据时显示的内容 | - |
| loading | 自定义加载中时显示的内容 | - |
| description | 自定义表格数据描述内容 | object |
| filterTrigger | 自定义高级筛选触发按钮 | object |
| transferTrigger | 自定义列头控制穿梭框触发按钮 | - |
| sizeControlTrigger | 自定义表格size切换触发按钮 | - |
| row-drag-icon | 自定义行拖拽图标 | - |
| column-drag-icon | 自定义列拖拽图标 | - |
| header-extra | 自定义表头额外内容，在表头下方显示 | - |
| [column.field]-field | 与插槽 [column.field] 作用一致，自定义该列单元格内容，当field与插槽名冲突时，可使用该插槽，优先级高于插槽 [column.field] | - |