Nvxtable-v32 NPM

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-nancal

npm

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 lib

API

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	false
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	Row[], record: object, field?: string
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>	records: object \| array
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		getSortColumns()	获取当前排序的所有列信息	any[]	--
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	ColumnInfo
setFilter(fieldOrColumn, options)	用于 filters，修改筛选列表（在筛选条件更新之后可以调用 updateData 函数处理表格数据）	Promise<any>	fieldOrColumn: string	ColumnInfo, options: []
openFilter(fieldOrColumn)	用于 filters，手动弹出筛选面板	Promise<any>	fieldOrColumn: string	ColumnInfo
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'	null
isSort(fieldOrColumn)	判断指定列是否为排序状态，如果为空则判断所有列	boolean	fieldOrColumn?: string	ColumnInfo
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	--

vxe-table vxe-grid vue table vue grid

n-table-utils nl-utils nvxtable-v3-nancal

@infinitebrahmanuniverse/nolb-nv @everything-registry/sub-chunk-2360 @zalastax/nolb-nv

0.0.1

2 years ago