nvxtable-v3-nancal
一个基于 vue 的 PC 端表格组件
浏览器支持
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 80+ |
80+ |
90+ |
75+ |
10+ |
目录
安装使用
API
Props
column-config 列配置信息
row-config 行配置信息
resizable-config 列宽拖动配置项
seq-config 序号配置项
sort-config 排序配置项
filter-config 筛选配置项
export-config 导出配置项
import-config 导入配置项
print-config 打印配置项
radio-config 单选框配置项
checkbox-config 复选框配置项
tooltip-config (tooltip 配置项)
expand-config 展开行配置项(不支持虚拟滚动)
tree-config 树形结构配置项
menu-config 快捷菜单配置项
mouse-config 鼠标配置项
keyboard-config 按键配置项
edit-config 可编辑配置项
valid-config 校验配置项
edit-rules 校验规则配置项
empty-render空内容渲染配置项
custom-config 自定义列配置项
scroll-x 横向虚拟滚动配置（不支持展开行）
scroll-y 纵向虚拟滚动配置(不支持展开行)
Slots 插槽
Events 事件
methods 方法
exportData(options) 将表格数据导出
openExport(options) 打开高级导出
importData(options) 将数据导入表格
openImport(options) 打开高级导入
print(options) 打印
版本信息
安装
版本：vue 3.x, 依赖库：n-table-utils
npm install n-table-utils
npm install nvxtable-v3-nancalnpm
import { createApp } from 'vue'
import 'n-table-utils'
import VXETable from 'nvxtable-v3-nancal'
import 'nvxtable-v3-nancal/lib/style.css'
createApp(App).use(VXETable).mount('#app')示例
<template>
<div>
<vxe-table :data="tableData">
<vxe-column type="seq" title="Seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-colgroup title="Group1">
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-colgroup>
</vxe-table>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const tableData = ref([
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
])
return {
tableData
}
}
})
</script>运行项目
安装依赖
npm install启动本地调试
npm run serve编译打包，生成编译后的目录：es,lib
npm run libAPI
Props属性
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| id | 唯一标识（被某些特定的功能所依赖） | string | -- |
| data | 表格数据（与 loadData 行为一致，更新数据是不会重置状态） | any[] | -- |
| height | 唯一标识（被某些特定的功能所依赖） | number/string (auto, %, px) | -- |
| max-height | 表格的最大高度 | number/string (%, px) | -- |
| auto-resize | 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到） | boolean | false |
| sync-resize | 自动跟随某个属性的变化去重新计算表格，和手动调用 recalculate 方法是一样的效果（对于通过某个属性来控制显示/隐藏切换时可能会用到） | boolean/string/number | -- |
| stripe | 是否带有斑马纹（需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式） | boolean | false |
| border | 是否带有边框 | boolean/string(default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）) | false |
| round | 是否为圆角边框 | boolean | false |
| size | 表格的尺寸 | string(medium, small, mini) | 继承上下文 |
| loading | 表格是否显示加载中 | boolean | true |
| align | 所有的列对齐方式 | string | left |
| header-align | 所有的表头列的对齐方式 | string(left（左对齐）, center（居中对齐）, right（右对齐) | 继承 align |
| footer-align | 所有的表尾列的对齐方式 | string(left（左对齐）, center（居中对齐）, right（右对齐) | 继承 align |
| show-header | 是否显示表头 | boolean | false |
| row-class-name | 给行附加 className | string/(({ row, rowIndex, $rowIndex }) => any) | -- |
| cell-class-name | 给单元格附加 className | string/(({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) => any) | -- |
| header-row-class-name | 给表头的行附加 className | string/(({ $rowIndex }) => any) | -- |
| header-cell-class-name | 给表头的单元格附加 className | string/(({ $rowIndex, column, columnIndex, $columnIndex }) => any) | -- |
| footer-row-class-name | 给表尾的行附加 className | string/(({ $rowIndex }) => any) | -- |
| footer-cell-class-name | 给表尾的单元格附加 className | string/(({ $rowIndex, column, columnIndex, $columnIndex }) => any) | -- |
| show-footer | 是否显示表尾 | boolean | false |
| footer-method | 表尾的数据获取方法，返回一个二维数组 | ({ columns, data }) => any[][] | -- |
| merge-cells | 临时合并指定的单元格 (不能用于展开行，不建议用于固定列、树形结构) | Array<{ row: number, col: number, rowspan: number, colspan: number }> | -- |
| merge-footer-items | 临时合并表尾 (不能用于展开行，不建议用于固定列、树形结构) | Array<{ row: number, col: number, rowspan: number, colspan: number }> | -- |
| show-overflow | 设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度） | boolean /string(ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为tooltip 提示）) | -- |
| show-header-overflow | 设置表头所有内容过长时显示为省略号 | boolean /string(ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为tooltip 提示）) | -- |
| show-footer-overflow | 设置表尾所有内容过长时显示为省略号 | boolean /string(ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为tooltip 提示）) | -- |
| keep-source | 保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）） | boolean | false |
| column-config | 列配置信息 | any | 继承 setup.table.columnConfig |
| row-config | 行配置信息 | any | 继承 setup.table.rowConfig |
| resizable-config | 列宽拖动配置项 | Object | 继承 setup.table.resizableConfig |
| seq-config | 序号配置项 | any | 继承 setup.table.seqConfig |
| sort-config | 排序配置项 | any | 继承 setup.table.sortConfig |
| filter-config | 筛选配置项 | any | 继承 setup.table.filterConfig |
| export-config | 导出配置项 | any | 继承 setup.table.exportConfig |
| import-config | 导入配置项 | any | 继承 setup.table.importConfig |
| print-config | 打印配置项 | any | 继承 setup.table.printConfig |
| radio-config | 单选框配置项 | any | 继承 setup.table.radioConfig |
| checkbox-config | 复选框配置项 | any | 继承 setup.table.checkboxConfig |
| tooltip-config | tooltip 配置项 | any | 继承 setup.table.tooltipConfig |
| expand-config | 展开行配置项（不支持虚拟滚动） | any | 继承 setup.table.expandConfig |
| tree-config | 树形结构配置项 | any | 继承 setup.table.treeConfig |
| menu-config | 快捷菜单配置项 | any | 继承 setup.table.menuConfig |
| mouse-config | 鼠标配置项 | any | 继承 setup.table.mouseConfig |
| keyboard-config | 按键配置项 | any | 继承 setup.table.keyboardConfig |
| edit-config | 可编辑配置项 | any | 继承 setup.table.editConfig |
| valid-config | 校验配置项 | any | -- |
| edit-rules | 校验规则配置项 | { [field: string]: VxeTableDefines.ValidatorRule[] } | -- |
| empty-text | 空数据时显示的内容 | string | -- |
| empty-render | 空内容渲染配置项，empty-render 的优先级大于 empty-text | any | 继承 setup.table.emptyRender |
| custom-config | 自定义列配置项 | any | 继承 setup.table.customConfig |
| scroll-x | 横向虚拟滚动配置（不支持展开行） | any | 继承 setup.table.scrollX |
| scroll-y | 纵向虚拟滚动配置（不支持展开行) | any | 继承 setup.table.scrollY |
| params | 自定义参数（可以用来存放一些自定义的数据） | any | -- |
column-config列配置信息
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| useKey | 是否需要为每一列的 VNode 设置 key 属性（非特殊情况下不需要使用） | boolean | false |
| isCurrent | 当鼠标点击列头时，是否要高亮当前列 | boolean | false |
| isHover | 当鼠标移到列头时，是否要高亮当前头 | boolean | false |
| resizable | 每一列是否启用列宽调整 | boolean | false |
| width | 每一列的宽度 | number, string | auto, px, % |
| minWidth | 每一列的最小宽度 | number, string | auto, px, % |
row-config行配置信息
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| useKey | 是否需要为每一列的 VNode 设置 key 属性（非特殊情况下不需要使用） | boolean | false |
| isCurrent | 当鼠标点击行时，是否要高亮当前行 | boolean | false |
| isHover | 当鼠标点击行时，是否要高亮当前行 | boolean | false |
| height | 只对 show-overflow 有效，每一行的高度 | number | -- |
| keyField | 自定义行数据唯一主键的字段名（默认自动生成） | string | _X_ROW_KEY |
resizable-config列宽拖动配置项
| 属性 | 说明 | 类型(返回类型)/可选值 | 默认值 |
|---|---|---|---|
| minWidth | 列宽拖动的最小宽度 | number | string | (({ $table, column, columnIndex, cell }) => number | string) | auto |
seq-config序号配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| seqMethod | 自定义序号的方法，返回处理后的值 | ({ row, rowIndex, column, columnIndex }) =>number | -- |
sort-config排序配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| defaultSort | 默认排序（只会在初始化时被触发一次） | any / | any[] |
| orders | 自定义轮转顺序 | string[]/asc, desc, null | ['asc', 'desc', 'null'] |
| multiple | 是否启用多列组合筛选 | boolean | false |
| chronological | 只对 multiple 有效，是否按照先后触发顺序进行排序 | boolean | false |
| remote | 所有列是否使用服务端排序，如果设置为 true 则不会对数据进行处理 | boolean | false |
| trigger | 触发方式（注：当多种功能重叠时，会同时触发） | string(default（点击按钮触发）, cell（点击表头触发）) | default |
| showIcon | 是否显示列头排序图标 | boolean | true |
| iconAsc | 自定义升序的图标 | string | -- |
| iconDesc | 自定义降序的图标 | string | -- |
| sortMethod | 自定义降序的图标 | ({ data, column, property, order }) => any[] | -- |
defaultSort默认排序（只会在初始化时被触发一次）
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| field | 列字段名 | string | -- |
| order | 排序方式 | string(asc（升序）,desc（降序）, null) | -- |
filter-config筛选配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| remote | 所有列是否使用服务端筛选，如果设置为 true 则不会对数据进行处理 | boolean | -- |
| filterMethod | 全局筛选方法，当触发筛选时会调用该函数，返回是否有效 | ({ options, values, cellValue, row, column }) => boolean | -- |
| showIcon | 是否显示列头筛选图标 | boolean | true |
| iconNone | 自定义无条件时显示的图标 | string | -- |
| iconMatch | 自定义带条件时显示的图标 | string | -- |
export-config导出配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| filename | 文件名 | string | -- |
| sheetName | 表名（只对支持的文档类型有效） | string | -- |
| type | 文件类型 | string(csv, html, xml, txt) | csv |
| types | 可选文件类型列表 | string[](csv, html, xml, txt) | csv, html, xml, txt |
| mode | 输出数据的方式 | string(current, selected, all) | current |
| modes | 输出数据的方式列表 | string[](current, selected, all) | current, selected |
| original | 是否为源数据（某些场景下支持 true， 比如虚拟滚动、优化的固定列..，如果需要支持导入，则必须设置为 true） | boolean | false |
| message | 是否显示内置的消息提示 | boolean | true |
| isHeader | 是否需要表头 | boolean | true |
| isColgroup | 如果存在，则支持带有分组结构的表头 | boolean | true |
| isFooter | 是否需要表尾 | boolean | true |
| isMerge | 如果存在，则支持临时合并的单元格 | boolean | false |
| isAllExpand | 如果存在，则强制展开所有树层级 | boolean | false |
| download | 是否马上下载，如果设置为 false 则通过返回结果为内容的 Promise | boolean | true |
| data | 指定数据 | any[] | -- |
| columns | 指定列 | Array<{ colId?: number; field:? string; type?: string }> | -- |
| columnFilterMethod | 列过滤方法，该函数的返回值用来决定是否过滤掉列 | ({ column, $columnIndex }) => boolean | 默认过滤掉 type=seq,checkbox,radio 和 field 为空的列 |
| dataFilterMethod | 数据过滤方法，该函数的返回值用来决定是否过滤掉数据行 | ({ row, $rowIndex }) => boolean | -- |
| footerFilterMethod | 表尾过滤方法，该函数的返回值用来决定是否过滤掉表尾行 | ({ items, $rowIndex }) => boolean | -- |
| remote | 是否服务端导出 | string | -- |
| style | 只对 type=html 有效，自定义文档的 css 样式信息 | string | -- |
| useStyle | 只对 type=html,xlsx 有效，支持带样式 | boolean | false |
| sheetMethod | 只对 type=xlsx 有效，该函数用于自定义工作簿的单元格 | ({ options, workbook, worksheet }) => void | -- |
| exportMethod | 只对 remote=true 有效，该函数用于自定义导出或服务端导出，返回 Promise | ({ options }) => Promise<any> | -- |
| beforeExportMethod | 该方法会在导出之前触发 | ({ options }) => viod | -- |
| afterExportMethod | 该方法会在导出之后触发 | ({ options }) => viod | -- |
import-config导入配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| mode | 导入数据的方式 | string(covering, insert) | covering |
| message | 是否显示内置的消息提示 | boolean | true |
| types | 导入的文件类型列表 | string[](csv, html, xml, txt) | ['csv', 'html', 'xml', 'txt'] |
| encoding | 导入的文件的编码类型 | string | utf-8 |
| remote | 是否服务端导入 | boolean | false |
| importMethod | 只对 remote=true 有效，该函数用于自定义导入或服务端导入，返回 Promise | ({ file, options }) => Promise<any> | -- |
| beforeImportMethod | 该方法会在导入之前触发 | ({ options }) => void | -- |
| afterImportMethod | 该方法会在导入之后触发 | ({ options }) => void | -- |
print-config打印配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| sheetName | 表名（只对支持的文档类型有效） | string | -- |
| mode | 输出数据的方式 | string(current, selected, all) | current |
| modes | 输出数据的方式列表 | string[](current, selected, all) | current, selected |
| original | 是否为源数据（某些场景下支持 true， 比如虚拟滚动、优化的固定列..，如果需要支持导入，则必须设置为 true） | boolean | false |
| isHeader | 是否需要表头 | boolean | true |
| isColgroup | 如果存在，则支持带有分组结构的表头 | boolean | true |
| isFooter | 是否需要表尾 | boolean | true |
| isMerge | 如果存在，则支持临时合并的单元格 | boolean | false |
| isAllExpand | 如果存在，则强制展开所有树层级 | boolean | false |
| data | 指定数据 | any[] | -- |
| columns | 指定列 | Array<{ colId?: number; field:? string; type?: string }> | -- |
| columnFilterMethod | 列过滤方法，该函数的返回值用来决定是否过滤掉列 | ({ column, $columnIndex }) => boolean | -- |
| dataFilterMethod | 数据过滤方法，该函数的返回值用来决定是否过滤掉数据行 | ({ row, $rowIndex }) => boolean | -- |
| footerFilterMethod | 表尾过滤方法，该函数的返回值用来决定是否过滤掉表尾行 | ({ items, $rowIndex }) => boolean | -- |
| style | 只对 type=html 有效，自定义文档的 css 样式信息 | string | -- |
| useStyle | 只对 type=html,xlsx 有效，支持带样式 | boolean | false |
| content | 自定义打印的内容 | string | -- |
| beforePrintMethod | 该函数会在打印之前触发，可以通过返回自定义打印的内容 | ({ content, options }) => string | -- |
radio-config单选框配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| strict | 严格模式，选中后不能取消 | boolean | true |
| reserve | 是否保留勾选状态，例如：数据被刷新或者分页之后还保留之前选中的状态（需要有 row-config.keyField） | boolean | false |
| labelField | 单选框显示的字段名，可以直接显示在单选框中 | string | -- |
| checkRowKey | 默认选中指定行（只会在初始化时被触发一次，需要有 row-config.keyField） | string | -- |
| visibleMethod | 是否允许勾选的方法，该方法，的返回值用来决定这一行的 radio 是否显示 | ({ row }) => boolean | -- |
| checkMethod | 是否允许选中的方法，该方法，的返回值用来决定这一行的 radio 是否可以选中 | ({ row }) => boolean | -- |
| trigger | 触发方式（注：当多种功能重叠时，会同时触发） | string(default（默认）, cell（点击单元格触发）, row（点击行触发）) | default |
| highlight | 高亮选中行 | boolean | false |
checkbox-config复选框配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| labelField | 复选框显示的字段名，可以直接显示在复选框中 | string | -- |
| checkField | 绑定选中属性，如果设置了该属性渲染速度更快（建议数据量大时使用，行数据中必须存在该字段，否则无效） | string | -- |
| showHeader | 是否显示全选按钮（如果 checkStrictly=true 则默认为 false） | boolean | true |
| checkAll | 默认勾选所有（只会在初始化时被触发一次） | boolean | false |
| checkRowKeys | 默认勾选指定行（只会在初始化时被触发一次，需要有 row-config.keyField） | string[] | -- |
| checkStrictly | 是否严格的遵循父子不互相关联的做法 | boolean | false |
| strict | 严格模式，当数据为空或全部禁用时，列头的复选框为禁用状态 | boolean | true |
| visibleMethod | 是否允许勾选的方法，该方法，的返回值用来决定这一行的 checkbox 是否显示 | ({ row }) => boolean | -- |
| checkMethod | 是否允许勾选的方法，该方法，的返回值用来决定这一行的 checkbox 是否可以勾选 | ({ row }) => boolean | -- |
| trigger | 触发方式（注：当多种功能重叠时，会同时触发） | string(default（默认）, cell（点击单元格触发）, row（点击行触发）) | default |
| highlight | 高亮勾选行 | boolean | false |
| reserve | 是否保留勾选状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前选中的状态（需要有 row-config.keyField） | boolean | false |
| range | 开启复选框范围选择功能（启用后通过鼠标在复选框的列内滑动选中或取消指定行） | boolean | false |
tooltip-config(tooltip 配置项)
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| showAll | 所有单元格开启工具提示 | boolean | false |
| theme | 主题颜色 | string(dark,light) | dark |
| enterable | 鼠标是否可进入到工具提示中 | boolean | false |
| enterDelay | 鼠标移入后延时多少才显示工具提示 | number | 500 |
| leaveDelay | 鼠标移出后延时多少才隐藏工具提示 | number | 300 |
| contentMethod | 该方法可以通过返回值来重写默认的提示内容，可以返回 null 使用默认的提示内容，可以返回空内容去掉指定单元格的提示内容 | ({ items?, row?, rowIndex?, $rowIndex, column, columnIndex, $columnIndex, type, cell, $event }) => string | -- |
expand-config展开行配置项（不支持虚拟滚动）
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| labelField | 展开列显示的字段名，可以直接显示在单元格中 | string | -- |
| expandAll | expandAll | boolean | false |
| expandRowKeys | 默认展开指定行（只会在初始化时被触发一次，需要有 row-config.keyField） | string[] | -- |
| accordion | 每次只能展开一行 | boolean | false |
| trigger | 触发方式（注：当多种功能重叠时，会同时触发） | (default（点击按钮触发）, cell（点击单元格触发）, row（点击行触发）) | default |
| lazy | 是否使用懒加载 | boolean | false |
| loadMethod | 该方法用于异步加载展开后的内容 | ({ row, rowIndex?, $rowIndex? }) => Promise<any[]> | -- |
| toggleMethod | 该方法在展开或关闭触发之前调用，可以通过返回值来决定是否允许继续执行 | ({ expanded, column, columnIndex, row, rowIndex? }) => boolean | -- |
| visibleMethod | 该函数的返回值用来决定是否允许显示展开按钮 | ({ column, columnIndex, row, rowIndex? }) => boolean | -- |
| reserve | 是否保留展开状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前展开的状态（需要有 row-config.keyField） | boolean | false |
| showIcon | 是否显示图标按钮 | boolean | true |
| iconOpen | 自定义展开后显示的图标 | string | -- |
| iconClose | 自定义收起后显示的图标 | string | -- |
| iconLoaded | 自定义懒加载中显示的图标 | string | -- |
tree-config树形结构配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| transform | 自动将列表转为树结构（支持虚拟滚动） | string | false |
| rowField | 树节点的字段名 | string | id |
| parentField | 树父节点的字段名 | string | parentId |
| children | 树子节点的字段名 | string | children |
| indent | 树节点的缩进 | number | 20 |
| line | 树节点的连接线（启用连接线会降低渲染性能） | boolean | false |
| expandAll | 默认展开所有子孙树节点（只会在初始化时被触发一次） | boolean | false |
| expandRowKeys | 默认展开指定树节点（只会在初始化时被触发一次，需要有 row-config.keyField） | string[] | -- |
| accordion | 对于同一级的节点，每次只能展开一个 | boolean | false |
| trigger | 触发方式（注：当多种功能重叠时，会同时触发） | string(default（点击按钮触发）, cell（点击单元格触发）, row（点击行触发）) | default |
| lazy | 是否使用懒加载（启用后只有指定 hasChild 的节点才允许被点击） | boolean | false |
| hasChild | 只对 lazy 启用后有效，标识是否存在子节点，从而控制是否允许被点击 | string | hasChild |
| loadMethod | 该方法用于异步加载子节点 | ({ row }) => Promise<any[]> | -- |
| toggleMethod | 该方法在展开或关闭触发之前调用，可以通过返回值来决定是否允许继续执行 | ({ expanded, row, column, columnIndex }) => boolean | -- |
| reserve | 是否保留展开状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前展开的状态（需要有 row-config.keyField） | boolean | false |
| showIcon | 是否显示图标按钮 | boolean | true |
| iconOpen | 自定义展开后显示的图标 | string | -- |
| iconClose | 自定义收起后显示的图标 | string | -- |
| iconLoaded | 自定义懒加载中显示的图标 | string | -- |
| sortKeyValue | 树形子级排序关键字 | string | id |
| sortMode | 树形子级是否排序(默认false升序) | boolean | false |
menu-config快捷菜单配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| enabled | 是否启用 | boolean | true |
| header | 表头的右键菜单 | any | -- |
| body | 内容的右键菜单 | any | -- |
| footer | 表尾的右键菜单 | any | -- |
| trigger | 自动将列表转为树结构（支持虚拟滚动） | string | false |
| visibleMethod | 触发方式 | string(default（默认右键表格触发）, cell（右键单元格触发）) | default |
| className | 菜单面板的 className | ({ type, options, columns, row?, rowIndex?, column?, columnIndex? }) => boolean | -- |
menu-config -> header/body/footer 表头的右键菜单
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| disabled | 是否禁用右键 | boolean | false |
| options | 菜单配置 | any[][] | -- |
menu-config -> header/body/footer -> options 表头的右键菜单
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| code | 菜单键值 | string | -- |
| name | 菜单名称（支持开启国际化） | string | -- |
| prefixIcon | 前缀图标 className | string | -- |
| suffixIcon | 后缀图标 className | string | -- |
| className | 菜单项的 className | string | -- |
| visible | 是否可视 | boolean | true |
| disabled | 是否禁用 | boolean | false |
| children | 二级菜单（最多只允许有二级） | any[] | -- |
menu-config -> header/body/footer -> options -> children 表头的右键菜单
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| code | 菜单键值 | string | -- |
| name | 菜单名称 | string | -- |
| prefixIcon | 前缀图标 className | string | -- |
| visible | 是否可视 | boolean | true |
| disabled | 是否禁用 | boolean | false |
mouse-config鼠标配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| selected | 开启单元格选中功能（只对 edit-config.mode=cell 有效） | boolean | false |
keyboard-config按键配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| isArrow | 开启方向键功能 | boolean | false |
| isEsc | 开启Esc键关闭编辑功能 | boolean | true |
| isDel | 开启删除键功能 | boolean | false |
| isEnter | 开启回车键功能 | boolean | false |
| isTab | 开启 Tab 键功能 | boolean | false |
| isEdit | 开启任意键进入编辑（功能键除外） | boolean | false |
| isChecked | 如果功能被支持，用于 column.type=checkbox | radio，开启空格键切换复选框或单选框状态功能 | boolean |
| enterToTab | 是否将回车键行为改成 Tab 键行为 | boolean | false |
| delMethod | 只对 isDel=true 有效，用于删除键清空单元格内容方法 | ({ row, rowIndex, column, columnIndex }) => void | -- |
| backMethod | 只对 isDel=true 有效，用于重写回退键清空单元格内容并激活为编辑状态方法 | ({ row, rowIndex, column, columnIndex }) => void | -- |
| editMethod | 只对 isEdit=true 有效，用于重写编辑单元格方法 | ({ row, rowIndex, column, columnIndex }) => void | -- |
edit-config可编辑配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| trigger | 触发方式 | string(manual（手动触发方式，只能用于 mode=row）,click（点击触发编辑）,dblclick（双击触发编辑）) | click |
| enabled | 是否启用 | boolean | true |
| mode | 编辑模式 | string(cell（单元格编辑模式）,row（行编辑模式）) | cell |
| showIcon | 是否显示列头编辑图标 | boolean | true |
| showStatus | 只对 keep-source 开启有效，是否显示单元格新增与修改状态 | boolean | false |
| showUpdateStatus | 只对 keep-source 开启有效，是否显示单元格修改状态 | boolean | false |
| showInsertStatus | 只对 keep-source 开启有效，是否显示单元格新增状态 | boolean | false |
| showAsterisk | 是否显示必填字段的红色星号 | boolean | true |
| autoClear | 当点击非编辑列之后，是否自动清除单元格的激活状态 | boolean | true |
| beforeEditMethod | 该方法的返回值用来决定该单元格是否允许编辑 | ({ row, rowIndex, column, columnIndex }) => boolean | -- |
| icon | 自定义可编辑列的状态图标 | string | -- |
valid-config校验配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| autoPos | 是否自动定位到校验不通过的单元格 | boolean | true |
| showMessage | 是否显示错误显示 | boolean | true |
edit-rules校验规则配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| required | 是否必填 | boolean | false |
| min | 校验值最小长度（如果 type=number 则比较值大小） | number | -- |
| max | 校验值最大长度（如果 type=number 则比较值大小） | number | -- |
| type | 数据校验的类型 | string(number, string, array) | string |
| pattern | 正则校验 | RegExp / | string |
| validator | 自定义校验方法，返回一个 Error 或者 Promise<new Error("提示消息")> | ({ cellValue, rule, rules, row, rowIndex，column, columnIndex }) => Error / | Promise<any> |
| message | 校验提示内容（支持开启国际化） | string | -- |
empty-render空内容渲染配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| name | 渲染器名称 | string | -- |
custom-config自定义列配置项
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| storage | 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id） | any | -- |
| checkMethod | 自定义列是否允许列选中的方法，该方法的返回值用来决定这一列的 checkbox 是否可以选中 | ({ column }) => boolean | true |
storage
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| visible | 启用显示/隐藏列状态 | boolean | -- |
| resizable | 启用列宽状态 | boolean | -- |
scroll-x横向虚拟滚动配置（不支持展开行）
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| enabled | 是否启用 | boolean | true |
| gt | 指定大于指定列时自动启动横向虚拟滚动，如果为 0 则总是启用；如果需要关闭，可以设置 enabled 为 false（注：启用横向虚拟滚动之后将不能支持分组表头） | number | 60 |
| oSize | 指定每次渲染的数据偏移量，偏移量越大渲染次数就越少，但每次渲染耗时就越久（对于低性能浏览器可以设置大一点，减低渲染次数 | number | 0 |
| scrollToLeftOnChange | 当数据源被更改时，自动将横向滚动条滚动到左侧 | boolean | false |
scroll-y纵向虚拟滚动配置(不支持展开行)
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| enabled | 是否启用 | boolean | true |
| gt | 指定大于指定行时自动启动纵向虚拟滚动，如果为 0 则总是启用；如果需要关闭，可以设置 enabled 为 false（注：启用纵向虚拟滚动之后将不能支持动态行高） | number | 100 |
| mode | 滚动模式 | String(default,wheel) | default |
| oSize | 指定每次渲染的数据偏移量，偏移量越大渲染次数就越少，但每次渲染耗时就越久（对于低性能浏览器可以设置大一点，减低渲染次数） | number | 0 |
| scrollToLeftOnChange | 当数据源被更改时，自动将纵向滚动条滚动到顶部 | boolean | false |
Slots插槽
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| empty | 空数据时显示的文本内容 | -- | {} |
Event事件
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| keydown-start | 当表格被激活且键盘被按下开始时会触发的事件 | -- | { $event } |
| keydown | 当表格被激活且键盘被按下时会触发的事件 | -- | { $event } |
| empkeydown-endty | 当表格被激活且键盘被按下结束时会触发的事件 | -- | { $event } |
| current-change | 只对 row-config.isCurrent 有效，当手动选中行并且值发生改变时触发的事件 | -- | { newValue, oldValue, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event } |
| radio-change | 只对 type=radio 有效，当手动勾选并且值发生改变时触发的事件 | -- | { newValue, oldValue, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event } |
| checkbox-change | 只对 type=checkbox 有效，当手动勾选并且值发生改变时触发的事件 | -- | { checked, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event } |
| checkbox-all | 只对 type=checkbox 有效，当手动勾选全选时触发的事件 | -- | { checked, $event } |
| checkbox-range-start | 只对 checkbox-config.range 有效，当鼠标范围选择开始时会触发的事件 | -- | { $event } |
| checkbox-range-change | 只对 checkbox-config.range 有效，当鼠标范围选择内的行数发生变化时会触发的事件 | -- | { $event } |
| checkbox-range-end | 只对 checkbox-config.range 有效，当鼠标范围选择结束时会触发的事件 | -- | { $event } |
| cell-click | 单元格被点击时会触发该事件 | -- | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, triggerRadio, triggerCheckbox, triggerTreeNode, triggerExpandNode, $event } |
| cell-dblclick | 单元格被双击时会触发该事件 | -- | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event } |
| cell-menu | 只对 menu-config 配置时有效，单元格被鼠标右键时触发该事件 | -- | { type, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event } |
| cell-mouseenter | 只对 tooltip-config 配置时有效，当鼠标移动到单元格时会触发该事件 | -- | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event } |
| cell-mouseleave | 只对 tooltip-config 配置时有效，当鼠标移开单元格时会触发该事件 | -- | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event } |
| header-cell-click | 表头单元格被点击时会触发该事件 | -- | { $rowIndex, column, columnIndex, $columnIndex, triggerResizable, triggerSort, triggerFilter, $event } |
| header-cell-dblclick | 表头单元格被双击时会触发该事件 | -- | { $rowIndex, column, columnIndex, $columnIndex, $event } |
| header-cell-menu | 只对 menu-config 配置时有效，表头单元格被鼠标右键时触发该事件 | -- | { type, column, columnIndex, $event } |
| footer-cell-click | 表尾单元格被点击时会触发该事件 | -- | { items, $rowIndex, column, columnIndex, $columnIndex, $event } |
| footer-cell-dblclick | 表尾单元格被双击时会触发该事件 | -- | { items, $rowIndex, column, columnIndex, $columnIndex, $event } |
| footer-cell-menu | 只对 menu-config 配置时有效，表尾单元格被鼠标右键时触发该事件 | -- | { type, column, columnIndex, $event } |
| clear-merge | 当用户点击取消所有临时合并时会触发该事件 | -- | { mergeCells, mergeFooterItems, $event } |
| sort-change | 当排序条件发生变化时会触发该事件 | -- | { column, property, order, sortBy, sortList, $event } |
| clear-sort | 当用户点击清除所有排序时会触发该事件 | -- | { sortList, $event } |
| filter-change | 当筛选条件发生变化时会触发该事件 | -- | { column, property, values, datas, filterList, $event } |
| filter-visible | 当筛选面板被触发时会触发该事件 | -- | { column, property, visible, filterList, $event } |
| clear-filter | 当用户点击清除所有筛选条件时会触发该事件 | -- | { filterList, $event } |
| resizable-change | 当列宽拖动发生变化时会触发该事件 | -- | { $rowIndex, column, columnIndex, $columnIndex, $event } |
| toggle-row-expand | 当行展开或收起时会触发该事件 | -- | { expanded, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event } |
| toggle-tree-expand | 当树节点展开或收起时会触发该事件 | -- | { expanded, row, column, columnIndex, $columnIndex, $event } |
| menu-click | 只对 menu-config 配置时有效，当点击快捷菜单时会触发该事件 | -- | { menu, type, row, rowIndex, column, columnIndex, $event } |
| cell-selected | 只对 mouse-config.selected 配置时有效，单元格被选中时会触发该事件 | -- | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex } |
| edit-closed | 只对 edit-config 配置时有效，单元格编辑状态下被关闭时会触发该事件 | -- | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex } |
| edit-actived | 只对 edit-config 配置时有效，单元格被激活编辑时会触发该事件 | -- | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex } |
| edit-disabled | 只对 edit-config 配置时有效，当单元格激活时如果是禁用状态时会触发该事件 | -- | { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex } |
| valid-error | 只对 edit-rules 配置时有效，当数据校验不通过时会触发该事件 | -- | { rule, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex } |
| scroll | 表格滚动时会触发该事件 | -- | { type, scrollTop, scrollLeft, scrollHeight, scrollWidth, bodyWidth, bodyHeight, isX, isY, $event } |
| custom | 如果与工具栏关联，在自定义列按钮被手动点击后会触发该事件 | -- | { type, $event } |
methods方法
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| loadData(data) | 加载数据（对于表格数据需要重载、局部递增场景下可能会用到） | Promise | data: array |
| reloadData(data) | 加载数据并清除所有状态（对于表格数据需要重载、局部更新被修改的数据） | -- | data: array |
| reloadRow(rows, record, field) | 局部加载行数据并恢复到初始状态，仅用于修改的数据，对新增的临时数据无效（对于行数据需要局部更改的场景中可能会用到） | Promise | rows: Row |
| reloadRowExpand(row) | 重新懒加载展开行，并展开内容 | Promise | rows: Row |
| reloadTreeExpand(row) | 重新懒加载树节点，并展开该节点 | Promise | rows: Row |
| loadColumn(columns) | 加载列配置（对于表格列需要重载、局部递增场景下可能会用到） | Promise | columns: array |
| reloadColumn(columns) | 加载列配置并恢复到初始状态（对于表格列需要重载、局部递增场景下可能会用到） | Promise | columns: array |
| refreshColumn() | 刷新列配置（对于动态修改属性、显示/隐藏列等场景下可能会用到） | Promise | -- |
| createRow(records) | 创建 Row | Rows 对象（对于某些特殊场景需要对数据进行手动插入时可能会用到） | Promise<row|rows> |
| createData(records) | 创建 data 对象（对于某些特殊场景可能会用到，会自动对数据的字段名进行检测，如果不存在就自动定义） | Promise<Array> | records: array |
| insert(records) | 往表格插入临时数据，从第一行插入一行或多行新数据 | Promise<{row, rows}> | records?: object | Array<object> |
| insertAt(records, row) | 往表格插入临时数据，从指定位置插入一行或多行；第二个参数：row 指定位置、null从第一行插入、-1 从最后插入 | Promise<{row, rows}> | records: object | Array<object>, row?: Row | -1 | 0 |
| revertData(rows, field) | 只对 keep-source 开启有效，还原指定行 row 或者整个表格的数据 | Promise | rows: Row | Array<Row>, field?: string |
| remove(rows) | 删除指定行数据，指定 row 或 [row, ...] 删除多条数据，如果为空则删除所有数据 | Promise<{row, rows}> | rows: Row | Array<Row> |
| removeCheckboxRow() | 删除复选框选中的行数据 | Promise<{row, rows}> | -- |
| removeRadioRow() | 删除单选框选中的行数据 | Promise<{row, rows}> | -- |
| removeCurrentRow() | 删除当前行选中的行数据 | Promise<{row, rows}> | -- |
| removeMergeCells(merges) | 取消单元格的临时合并状态，如果为数组，则取消多个合并 | Promise<merges> | merges: {row: Row, col: ColumnInfo} | {row: Row, col: ColumnInfo}[] |
| removeMergeFooterItems(merges) | 取消表尾的临时合并状态，如果为数组，则取消多个合并 | Promise<merges> | merges: {row: Row, col: ColumnInfo} | {row: Row, col: ColumnInfo}[] |
| getRowSeq(row) | 根据 row 获取行的序号 | string | number | rows: Row |
| getRowIndex(row) | 根据 row 获取相对于 data 中的索引 | number | rows: Row |
| getVTRowIndex(row) | 根据 row 获取相对于当前数据中的索引 | number | rows: Row |
| getVMRowIndex(row) | 根据 row 获取渲染中的虚拟索引 | number | rows: Row |
| getParentRow(rowOrRowid) | 只对 tree-config 有效，获取行的父级 | any | rowOrRowid: string | Row |
| getRowNode(tr) | 根据 tr 元素获取对应的 row 信息 | {item, items, index, parent} | tr: Element |
| getColumns() | 获取表格的可视的列 | Array | -- |
| getColid(column) | 根据列获取列的唯一主键 | String | column: ColumnConfig |
| getColumnById(colid) | 根据列的唯一主键获取列 | Column | colid: string |
| getColumnByField(field) | 根据列的字段名获取列 | Column | field: string |
| getTableColumn() | 获取当前表格的列（收集到的全量列、全量表头列、处理条件之后的全量表头列、当前渲染中的表头列） | {collectColumn, fullColumn, visibleColumn, tableColumn} | -- |
| getColumnIndex(column) | 根据 column 获取相对于 columns 中的索引 | number | column: ColumnConfig |
| getVMColumnIndex(column) | 根据 column 获取渲染中的虚拟索引 | number | column |
| getVTColumnIndex(column) | 根据 column 获取相对于当前表格列中的索引（分组表头可能会用到） | number | column |
| getColumnNode(cell) | 根据 th/td 元素获取对应的 column 信息 | {item, items, index, parent} | cell: HTMLTableDataCellElement | HTMLTableHeaderCellElement |
| getSortColumns() | 获取当前排序的所有列信息 | any[] | -- |
| getCheckedFilters() | 获取当前筛选的所有列信息 | any[] | -- |
| getTableData() | 获取当前表格的数据（完整的全量表体数据、处理条件之后的全量表体数据、当前渲染中的表体数据、当前渲染中的表尾数据） | {fullData, visibleData, tableData, footerData} | -- |
| getRowById(rowid) | 根据行的唯一主键获取行（需要 row-config.keyField） | String | rowid: string |
| getRowid(row) | 根据行获取行的唯一主键（需要 row-config.keyField） | Row | row: Row |
| getData(rowIndex) | 获取数据，和 data 的行为一致，也可以指定索引获取数据 | Array | rowIndex?: number |
| getRecordset() | 获取表格数据集（获取插入、删除、更改的数据，对于增删改查表格非常方便） | {insertRecords, removeRecords, updateRecords} | -- |
| getInsertRecords() | 用于 edit-config，获取插入的临时数据 | Array | -- |
| getRemoveRecords() | 获取已删除的数据 | Array | -- |
| getUpdateRecords() | 只对 keep-source 开启有效，获取已修改的数据 | Array | -- |
| getMergeCells() | 获取临时合并的单元格 | Array<{row: any, col: ColumnInfo, rowspan: number, colspan: number}> | -- |
| getMergeFooterItems() | 获取临时合并的表尾 | Array<{row: any, col: ColumnInfo, rowspan: number, colspan: number}> | -- |
| getCurrentColumn() | 用于 column-config.isCurrent，获取当前列 | any[] | -- |
| getCurrentRecord() | 用于 row-config.isCurrent，获取高亮的当前行数据 | Row | -- |
| getRadioRecord(isFull) | 用于 type=radio，获取当前已选中的行数据（当前列表，如果 isFull=true 则获取全表已选中的数据） | Row | -- |
| getRadioReserveRecord(isFull) | 用于 radio-config.reserve，获取已保留选中的行数据（不包含当前列表，如果 isFull=true 则不包含全部列表） | Row | -- |
| getCheckboxRecords(isFull) | 用于 type=checkbox，获取当前已选中的行数据（当前列表，如果 isFull=true 则获取全表已选中的数据 | Array | -- |
| getCheckboxReserveRecords(isFull) | 用于 checkbox-config.reserve，获取已保留选中的行数据（不包含当前列表，如果 isFull=true 则不包含全部列表） | Array | -- |
| getCheckboxIndeterminateRecords(isFull) | 用于 tree-config 和 type=checkbox，获取半选状态的行数据（当前列表，如果 isFull=true 则获取全表已选中的数据） | Array | -- |
| getRowExpandRecords() | 用于 expand-config，用于展开行，获取已展开的行数据 | Array | -- |
| getTreeExpandRecords() | 用于 tree-config，用于树表格，获取已展开的节点（注意，即使父节点被收起，只要该节点还处于展开状态都能获取到） | Array | -- |
| getEditRecord() | 用于 edit-config，获取已激活的行数据 | {row,rowIndex,$rowIndex,column,columnIndex,$columnIndex} | row |
| getSelectedCell() | 用于 mouse-config.selected，获取选中的单元格信息 | {row,column} | -- |
| getScroll() | 获取表格的滚动状态 | {virtualX, virtualY, scrollTop, scrollLeft} | -- |
| isEditByRow(row) | 用于 edit-config，判断行是否为激活编辑状态 | boolean | row |
| isInsertByRow(row) | 用于 edit-config，判断行是否为插入的临时数据 | boolean | row: Row |
| isUpdateByRow(row, field) | 只对 keep-source 开启有效，判断行数据是否发生改变 | boolean | row: Row, field?: string |
| isAllCheckboxChecked() | 用于 type=checkbox，判断列头复选框是否被选中 | boolean | -- |
| isAllCheckboxIndeterminate() | 用于 type=checkbox，判断列头复选框是否被半选 | boolean | -- |
| isCheckedByCheckboxRow(row) | 用于 type=checkbox，判断复选行数据是否勾选 | boolean | row: Row |
| isIndeterminateByCheckboxRow(row) | 用于 type=checkbox，判断复选行数据是否半选 | boolean | row: Row |
| isCheckedByRadioRow(row) | 用于 type=radio，判断单选行数据是否勾选 | boolean | row: Row |
| isExpandByRow(row) | 用于 expand-config，判断行是否为展开状态 | boolean | row |
| isRowExpandLoaded(row) | 用于 expand-config.lazy，用于懒加载展开行，判断展开行是否懒加载完成 | boolean | row |
| isTreeExpandByRow(row) | 用于 tree-config，判断行是否为树形节点展开状态 | boolean | row: Row |
| isTreeExpandLoaded(row) | 用于 tree-config.lazy，用于懒加载树表格，判断树节点是否懒加载完成 | boolean | row: Row |
| isFilter(fieldOrColumn) | 判断指定列是否为筛选状态，如果为空则判断所有列 | boolean | fieldOrColumn?: string |
| setFilter(fieldOrColumn, options) | 用于 filters，修改筛选列表（在筛选条件更新之后可以调用 updateData 函数处理表格数据） | Promise<any> | fieldOrColumn: string |
| openFilter(fieldOrColumn) | 用于 filters，手动弹出筛选面板 | Promise<any> | fieldOrColumn: string |
| setEditRow(row) | 用于 edit-config，激活行编辑并激活第一个单元格 | Promise<any> | row: Row |
| setEditCell(row, fieldOrColumn) | 用于 edit-config，激活单元格编辑 | Promise<any> | row: Row, fieldOrColumn: string | ColumnInfo |
| setSelectCell(row, fieldOrColumn) | 用于 mouse-config.selected，选中指定的单元格 | Promise<any> | row: Row, fieldOrColumn: string | ColumnInfo |
| setMergeCells(merges) | 临时合并单元格，如果为数组则合并多个 | Promise<any> | merges: TableMergeConfig | TableMergeConfig[] |
| setMergeFooterItems(merges) | 临时合并表尾，如果为数组则合并多个 | Promise<any> | merges: TableMergeConfig | TableMergeConfig[] |
| setRowExpand(rows, checked) | 用于 expand-config，设置展开行，二个参数设置这一行展开与否 | Promise<any> | rows: Row | Array<Row>, checked: boolean |
| setAllRowExpand(checked) | 用于 expand-config，设置所有行的展开与否（如果是关闭所有行，可以使用 clearRowExpand 快速清除） | Promise<any> | checked: boolean |
| setTreeExpand(rows, checked) | 用于 tree-config，设置展开树形节点，二个参数设置这一行展开与否 | Promise<any> | rows: Row | Array<Row>, checked: boolean |
| setAllTreeExpand(checked) | 用于 tree-config，设置所有树节点的展开与否（如果是关闭所有树节点，可以使用 clearTreeExpand 快速清除） | Promise<any> | checked: boolean |
| setCurrentRow(row) | 用于 row-config.isCurrent，设置某一行为高亮状态 | Promise<any> | row: Row |
| setCurrentColumn(fieldOrColumn) | 用于 column-config.isCurrent，设置某列行为高亮状态 | Promise<any> | fieldOrColumn: string | ColumnInfo |
| setRadioRow(row) | 用于 type=radio 单选框，设置某一行为选中状态 | Promise<any> | row: Row |
| setCheckboxRow(rows, checked) | 用于 type=checkbox 复选框，设置行为选中状态，第二个参数为选中与否 | Promise<any> | rows: Row | Array<Row>, checked: boolean |
| setAllCheckboxRow(checked) | 用于 type=checkbox，设置所有行的选中状态 | Promise<any> | checked: boolean |
| toggleCheckboxRow(row) | 用于 type=checkbox，切换某一行的选中状态 | Promise<any> | row: Row |
| toggleAllCheckboxRow() | 用于 type=checkbox，切换所有行的选中状态 | Promise<any> | -- |
| toggleRowExpand(row) | 用于 type=expand，切换展开行的状态 | Promise<any> | row: Row |
| toggleTreeExpand(row) | 用于 tree-config，切换展开树形节点的状态 | Promise<any> | row: Row |
| clearMergeCells() | 手动清除临时合并的单元格 | Promise<any> | -- |
| clearMergeFooterItems() | 手动清除临时合并的表尾 | Promise<any> | -- |
| clearCurrentRow() | 用于 row-config.isCurrent，手动清空当前高亮的状态 | Promise<any> | -- |
| clearCurrentColumn() | 用于 column-config.isCurrent，手动清空当前高亮的状态 | Promise<any> | -- |
| clearRadioRow() | 用于 type=radio，手动清空用户的选择 | Promise<any> | -- |
| clearRadioReserve() | 用于 radio-config.reserve，手动清空用户保留选中的行数据 | Promise<any> | -- |
| clearCheckboxRow() | 用于 type=checkbox，手动清空用户的选择 | Promise<any> | -- |
| clearCheckboxReserve() | 用于 checkbox-config.reserve，手动清空用户保留选中的行数据 | Promise<any> | -- |
| clearRowExpand() | 用于 type=expand，手动清空展开行状态，数据会恢复成未展开的状态 | Promise<any> | -- |
| clearRowExpandLoaded(row) | 用于 expand-config.lazy，手动清空懒加载展开行的状态，数据会恢复成未展开的状态，当再次展开时会重新加载 | Promise<any> | row: any |
| clearTreeExpand() | 用于 tree-config，手动清空树形节点的展开状态，数据会恢复成未展开的状态 | Promise<any> | -- |
| clearTreeExpandLoaded(row) | 用于 tree-config.lazy，手动清空懒加载树节点的状态，数据会恢复成未展开的状态，当再次展开时会重新加载 | Promise<any> | row: any |
| clearSort(fieldOrColumn) | 手动清空排序条件，数据会恢复成未排序的状态 | Promise<any> | fieldOrColumn?: string | ColumnConfig |
| clearFilter(fieldOrColumn) | 手动清空筛选条件（如果不传 column 则清空所有筛选条件），数据会恢复成未筛选的状态 | Promise<any> | fieldOrColumn?: string | ColumnConfig |
| clearSelected() | 手动清除单元格选中状态 | Promise<any> | -- |
| clearEdit() | 手动清除单元格激活状态 | Promise<any> | -- |
| clearData(rows, field) | 手动清空单元格内容，如果不创参数，则清空整个表格内容，如果传了行则清空指定行内容，如果传了指定字段，则清空该字段内容 | Promise<any> | rows?: Row | Array<Row>, field?: string |
| clearScroll() | 手动清除滚动相关信息，还原到初始状态 | Promise<any> | -- |
| clearValidate() | 手动清除校验 | Promise<any> | -- |
| clearAll() | 手动清除表格所有条件，还原到初始状态（对于增删改查的场景中可能会用到，比如在数据保存之后清除表格缓存） | Promise<any> | -- |
| resetColumn(options) | 手动重置列的显示隐藏、列宽拖动的状态；如果为 true 则重置所有状态（如果已关联工具栏，则会同步更新） | Promise<any> | rows?: Row | Array<Row>, field?: string |
| closeFilter() | 手动关闭筛选面板 | Promise<any> | -- |
| closeTooltip() | 手动关闭 tooltip 提示 | Promise<any> | -- |
| closeMenu() | 手动关闭右键菜单 | Promise<any> | -- |
| updateFooter() | 手动更新表尾（对于某些需要频繁更新的场景下可能会用到） | Promise<any> | -- |
| updateStatus(slotParams) | 更新单元格状态（当使用自定义渲染时可能会用到） | Promise<any> | slotParams: { row, column } |
| hideColumn(fieldOrColumn) | 隐藏指定列 | Promise<any> | fieldOrColumn: string | ColumnConfig |
| showColumn(fieldOrColumn) | 显示指定列 | Promise<any> | fieldOrColumn: string | ColumnConfig |
| scrollTo(scrollLeft, scrollTop) | 如果有滚动条，则滚动到对应的位置 | Promise<any> | scrollLeft?: number, scrollTop?: number |
| scrollToRow(row, fieldOrColumn) | 如果有滚动条，则滚动到对应的行（对于某些特定的场景可能会用到，比如定位到某一行） | Promise<any> | row: Row, fieldOrColumn?: string | ColumnConfig |
| scrollToColumn(fieldOrColumn) | 如果有滚动条，则滚动到对应的列（对于某些特定的场景可能会用到，比如定位到某一列） | Promise<any> | fieldOrColumn: string | ColumnConfig |
| sort(sortConfs, order) | 手动对表格进行排序（如果 order 为空则自动切换排序） | Promise<any> | sortConfs: string | { field: string | ColumnInfo, order: 'desc' | 'asc' | null } | { field: string | ColumnInfo, order?: 'desc' | 'asc' | null }[], order?: 'desc' | 'asc' |
| isSort(fieldOrColumn) | 判断指定列是否为排序状态，如果为空则判断所有列 | boolean | fieldOrColumn?: string |
| recalculate(refull) | 重新计算表格，如果传 true 则进行完整计算（对于某些特殊场景可能会用到，比如隐藏的表格、重新计算列宽...等） | Promise<any> | refull?: boolean |
| refreshScroll() | 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步） | Promise<any> | -- |
| validate(rows, callback) | 快速校验，如果存在记录不通过的记录，则返回不再继续校验（异步校验除外）；如果第一个参数为 true 则校验当前表格数据，如果指定 row 或 rows 则校验指定行或多行，如果不指定数据，则默认只校验临时变动的数据，例如新增或修改。该回调函数会在校验结束后被调用 callback(errMap)。若不传入回调函数，则会返回一个 promise | Promise<ErrMap> | rows?: boolean | Row | Row[], callback?: (errMap) => void |
| fullValidate(rows, callback) | 完整校验，和 validate 的区别就是默认校验当前表格数据并且给有效数据中的每一行进行校验 | Promise<ErrMap> | rows?: boolean | Row | Row[] | ((errMap) => void), callback?: (errMap) => void |
| exportData(options) | 将表格数据导出（树结构和虚拟滚动只允许导出数据源） | Promise<any> | options: object |
| openExport(options) | 打开高级导出（只对 export-config 启用后有效） | Promise<any> | options: object |
| importData(options) | 将数据导入表格（只支持基本数据结构） | Promise<any> | options: object |
| openImport(options) | 打开高级导入（只对 import-config 启用后有效） | Promise<any> | options: object |
| print(options) | 打印 | Promise<any> | options: object |
| saveFile(options) | 保存文件到本地 | Promise<any> | options: object |
| readFile(options) | 读取本地文件 | Promise<{ file, files }> | options: object |
| openTooltip(target, content) | 打开 tooltip 提示 | Promise<any> | target: HTMLElement, content: string | number |
| focus() | 使表格获取焦点 | Promise<any> | -- |
| blur() | 使表格失去焦点 | Promise<any> | -- |
resetColumn(options)
手动重置列的显示隐藏、列宽拖动的状态；如果为 true 则重置所有状态（如果已关联工具栏，则会同步更新）
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| visible | 是否重置可视列状态 | boolean | true |
| resizable | 是否重置列宽拖动状态 | boolean | false |
exportData(options)
将表格数据导出（树结构和虚拟滚动只允许导出数据源）
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| filename | 文件名 | string | -- |
| sheetName | 表名（只对支持的文档类型有效） | string | -- |
| type | 文件类型 | string(csv, html, xml, txt) | csv |
| types | 可选文件类型列表 | string[](csv, html, xml, txt) | csv, html, xml, txt |
| mode | 输出数据的方式 | string(current, selected, all) | current |
| modes | 输出数据的方式列表 | string[](current, selected, all) | current, selected |
| original | 是否为源数据（某些场景下支持 true， 比如虚拟滚动、优化的固定列..，如果需要支持导入，则必须设置为 true） | boolean | false |
| message | 是否显示内置的消息提示 | boolean | true |
| isHeader | 是否需要表头 | boolean | true |
| isColgroup | 如果存在，则支持带有分组结构的表头 | boolean | true |
| isFooter | 是否需要表尾 | boolean | true |
| isMerge | 如果存在，则支持临时合并的单元格 | boolean | false |
| isAllExpand | 如果存在，则强制展开所有树层级 | boolean | false |
| download | 是否马上下载，如果设置为 false 则通过返回结果为内容的 Promise | boolean | true |
| data | 指定数据 | any[] | -- |
| columns | 指定列 | Array<{ colId?: number; field:? string; type?: string }> | -- |
| columnFilterMethod | 列过滤方法，该函数的返回值用来决定是否过滤掉列 | ({ column, $columnIndex }) => boolean | 默认过滤掉 type=seq,checkbox,radio 和 field 为空的列 |
| dataFilterMethod | 数据过滤方法，该函数的返回值用来决定是否过滤掉数据行 | ({ row, $rowIndex }) => boolean | -- |
| footerFilterMethod | 表尾过滤方法，该函数的返回值用来决定是否过滤掉表尾行 | ({ items, $rowIndex }) => boolean | -- |
| remote | 是否服务端导出 | boolean | false |
| style | 只对 type=html 有效，自定义文档的 css 样式信息 | string | -- |
| useStyle | 只对 type=html,xlsx 有效，支持带样式 | boolean | false |
| sheetMethod | 只对 type=xlsx 有效，该函数用于自定义工作簿的单元格 | ({ options, workbook, worksheet }) => void | -- |
| exportMethod | 只对 remote=true 有效，该函数用于自定义导出或服务端导出，返回 Promise | ({ options }) => Promise<any> | -- |
| beforeExportMethod | 该方法会在导出之前触发 | ({ options }) => void | -- |
| afterExportMethod | 该方法会在导出之后触发 | ({ options }) => void | -- |
openExport(options) 打开高级导出
打开高级导出（只对 export-config 启用后有效）
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| filename | 文件名 | string | -- |
| sheetName | 表名（只对支持的文档类型有效） | string | -- |
| type | 文件类型 | string(csv, html, xml, txt) | csv |
| types | 可选文件类型列表 | string[](csv, html, xml, txt) | csv, html, xml, txt |
| mode | 输出数据的方式 | string(current, selected, all) | current |
| modes | 输出数据的方式列表 | string[](current, selected, all) | current, selected |
| original | 是否为源数据（某些场景下支持 true， 比如虚拟滚动、优化的固定列..，如果需要支持导入，则必须设置为 true） | boolean | false |
| message | 是否显示内置的消息提示 | boolean | true |
| isHeader | 是否需要表头 | boolean | true |
| isColgroup | 如果存在，则支持带有分组结构的表头 | boolean | true |
| isFooter | 是否需要表尾 | boolean | true |
| isMerge | 如果存在，则支持临时合并的单元格 | boolean | false |
| isAllExpand | 如果存在，则强制展开所有树层级 | boolean | false |
| remote | 是否服务端导出 | boolean | false |
| style | 只对 type=html 有效，自定义文档的 css 样式信息 | string | -- |
| useStyle | 只对 type=html,xlsx 有效，支持带样式 | boolean | false |
| sheetMethod | 只对 type=xlsx 有效，该函数用于自定义工作簿的单元格 | ({ options, workbook, worksheet }) => void | -- |
| exportMethod | 只对 remote=true 有效，该函数用于自定义导出或服务端导出，返回 Promise | ({ options }) => Promise<any> | -- |
| beforeExportMethod | 该方法会在导出之前触发 | ({ options }) => void | -- |
| afterExportMethod | 该方法会在导出之后触发 | ({ options }) => void | -- |
importData(options)
将数据导入表格（只支持基本数据结构）
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| mode | 文件名 | 导入数据的方式（covering, insert） | covering |
| message | 是否显示内置的消息提示 | boolean | true |
| types | 导入的文件类型列表 | string[](csv, html, xml, txt) | ['csv', 'html', 'xml', 'txt'] |
| encoding | 导入的文件的编码类型 | string | utf-8 |
| remote | 是否服务端导入 | boolean | false |
| importMethod | 只对 remote=true 有效，该函数用于自定义导入或服务端导入，返回 Promise | ({ file, options }) => Promise<any> | -- |
| beforeImportMethod | 该方法会在导入之前触发 | ({ options }) => void | -- |
| afterImportMethod | 该方法会在导入之后触发 | ({ options }) => void | -- |
openImport(options)
打开高级导入（只对 import-config 启用后有效）
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| mode | 文件名 | 导入数据的方式（covering, insert） | covering |
| message | 是否显示内置的消息提示 | boolean | true |
| types | 导入的文件类型列表 | string[](csv, html, xml, txt) | ['csv', 'html', 'xml', 'txt'] |
| encoding | 导入的文件的编码类型 | string | utf-8 |
| remote | 是否服务端导入 | boolean | false |
| importMethod | 只对 remote=true 有效，该函数用于自定义导入或服务端导入，返回 Promise | ({ file, options }) => Promise<any> | -- |
| beforeImportMethod | 该方法会在导入之前触发 | ({ options }) => void | -- |
| afterImportMethod | 该方法会在导入之后触发 | ({ options }) => void | -- |
print(options)
打印
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| sheetName | 表名（只对支持的文档类型有效） | string | -- |
| mode | 输出数据的方式 | string(current, selected, all) | current |
| modes | 输出数据的方式列表 | string[](current, selected, all) | current, selected |
| original | 是否为源数据（某些场景下支持 true， 比如虚拟滚动、优化的固定列..，如果需要支持导入，则必须设置为 true） | boolean | false |
| isHeader | 是否需要表头 | boolean | true |
| isColgroup | 如果存在，则支持带有分组结构的表头 | boolean | true |
| isFooter | 是否需要表尾 | boolean | true |
| isMerge | 如果存在，则支持临时合并的单元格 | boolean | false |
| isAllExpand | 如果存在，则强制展开所有树层级 | boolean | false |
| data | 指定数据 | any[] | -- |
| columns | 指定列 | Array<{ colId?: number; field:? string; type?: string }> | -- |
| columnFilterMethod | 列过滤方法，该函数的返回值用来决定是否过滤掉列 | ({ column, $columnIndex }) => boolean | 默认过滤掉 type=seq,checkbox,radio 和 field 为空的列 |
| dataFilterMethod | 数据过滤方法，该函数的返回值用来决定是否过滤掉数据行 | ({ row, $rowIndex }) => boolean | -- |
| footerFilterMethod | 表尾过滤方法，该函数的返回值用来决定是否过滤掉表尾行 | ({ items, $rowIndex }) => boolean | -- |
| style | 只对 type=html 有效，自定义文档的 css 样式信息 | string | -- |
| content | 自定义打印的内容 | string | -- |
| beforePrintMethod | 该函数会在打印之前触发，可以通过返回自定义打印的内容 | -- |
saveFile(options)
保存文件到本地
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| filename | 文件名 | string | -- |
| type | 文件类型 | string | -- |
| content | 内容 | string | Blob | -- |
readFile(options)
读取本地文件
| 属性 | 说明 | 类型/可选值 | 默认值 |
|---|---|---|---|
| multiple | 是否允许多选 | boolean | false |
| type | 支持选取的文件类型 | Array | ['csv', 'html', 'xml', 'txt'] |
| message | 是否显示内置的消息提示 | boolean | true |
迭代信息
| 版本 | 说明 | 日期 | 备注 |
|---|---|---|---|
| 0.0.1 | 配色方案修改 | 2022-07-26 | -- |