edit-table-vue3

edit-table-vue3

Description

基于 vue3 的可编辑表格

Params

参数	说明	类型	默认值
dataSource(v-model)	表格数据	[object, object, ...]	[]
columns(v-model)	表格列	columns	[]
border	是否显示边框	boolean	true
rowKey	行唯一 key	string	id
rowSelection	选择行配置	rowSelection	-
defaultRowData	编辑表格行默认数据	Object	-
menus	自定义右键菜单	menus	-
wrapMenusClassName	右键菜单外层容器样式名	string	-
keepLastRowEmpty	保持表格最后一行为空数据	boolean	false
resizeCol	手动调整列宽	boolean	false
showRowIndex	是否显示行号	boolean	false
showRowDrag	是否开启拖拽行功能	boolean	false
dargRowEnd	拖拽行完成后回调	Function	-
showColDrag	是否开启拖拽列功能	boolean	false
dargColEnd	拖拽列完成后回调	Function	-
stickyHead	表头是否启用粘性	boolean	false
stickyIndex	行号是否启用粘性	boolean	false
readonly	只读模式，或者指定行为只读模式	boolean ｜ [key1, key2, ...]	false
disabled	禁用模式，或者指定行为禁用模式	boolean ｜ [key1, key2, ...]	false
openVirtualScroll	是否开启虚拟滚动	boolean | VirtualScrollProps	false
relateRowChosed	是否启动关联表格选择行，开启时，表格内容的选择行将与行选择 checkbox 联动	boolean	false
customRow	行属性配置	(record: Record, index: number) => ({ disabled, onclick, .... }), 函数返回内容同and design vue	-
customCell	单元格属性配置	(record: Record, column: Column, index: number) => ({ disabled, onclick, .... }), 函数返回内容同and design vue	-
customEditer	编辑项配置	customEditer	-
selectedStyleBorderWidth	选择边框宽度	string	1px
selectedStyleBorderColor	选择边框颜色	string	rgba(0, 127, 255, 0.5)
lang	语言配置	zh_CN、en_US、ru_RU	zh_CN
messageConfig	文案配置	JSON	messageConfig
openUndo	是否启用撤销、重做	boolean	true
rules	表格数据验证	Rule 、Rule[]	-
fastKeyboard	快捷键配置, 没有配置时，将根据菜单项进行匹配是否启用某个快捷操作	FastKeyboard[]	-
checkNoRepaeatRowKey	是否开启自动检测是否含有相同key的行数据（性能考虑，非必要不打开）	boolean	-
rowAutoHeight	行高度是否根据内容自动调整，设置为true时，虚拟滚动将失效	boolean	-
pagination	分页器，参考配置项或 pagination文档，设为 false 时不展示和进行分页	PaginationProps | boolean	-
stripe	是否为斑马纹 table	boolean	-
block	是否为块级，设置为true时， table 元素 width将会是铺满宽度；	boolean	-
serviceSorter	使用服务端排序，设置为true时，排序将触发change事件	boolean	-
loading	是否处于加载数据状态	boolean	-
sortCallback	排序完成后回调，注意：服务端排序将不进行回调	(sortOrder: boolean |'ascend'|'descend', column: Column, record: Record) => void	-

columns

参数	说明	类型	默认值
title	表头文字	string	-
dataIndex	列字段 key	string
type	表格列单元格内容类型	text ｜ select ｜ checkbox	text
valueType	列的数据类型，在复制粘贴时，如果想不丢失数据类型，请配置此项	string ｜ number ｜ boolean	string
options	当 type 为 select 时，下拉选择项	{label, value}[]	-
slotName	列插槽名	-	-
width	列默认宽度	number	`-
minWidth	列最小宽度	number	-
rules	列数据验证	Rule 、Rule[]	-
fixed	是否固定列	boolean ｜ 'left' ｜ 'right'	false
tooltip	是否开启 Tooltip	boolean	false
autoTooltip	开启自动判断溢出时才显示 Tooltip， 开启 Tooltip 时有效	boolean	true
sortOrder	排序方式（受控）	false、ascend 、 descend	-
sorter	打开排序，可以自定义本地sort排序函数	boolean、(a: Record, b: Record) => number	false
sortCallback	排序完成后回调，注意：服务端排序将不进行回调	(sortOrder: boolean |'ascend'|'descend', column: Column, record: Record) => void	-
customCopy	自定义复制，返回的字符串将被decode，传回customPaste回调的参数中	({value, rowindex, record, source}, { rowindexs, columns, records, source }) => string	-
customPaste	自定义粘贴	({value, rowindex, record, source}, { rowindexs, columns, records, source }) => void	-
precision	定义数据精度，数据会进行自动补0	number | ((data: { column: Column, record: Record, rowindex: number }) => number)	-
filterMultiple	是否多选	boolean	false
filters	表头的筛选菜单项	{label: string, value: string | number}[]	-
filteredValue	筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组	(string | number)[]	-
readonly	列是否只读，配置为true时，不允许修改、粘贴、删除单元格	boolean	-
disabled	列是否禁用，配置为true时，不允许修改、粘贴、删除单元格	boolean	-

rowSelection

参数	说明	类型	默认值
fixed	把选择框列固定在左边	boolean	false
selectedRowKeys	指定选中项的 key 数组，需要和 onChange 进行配合	string[]	[]
disableSelectedRowKeys	指定禁止选择的 key 数组	string[]	[]
onChange	选中项发生变化时的回调	(selectedRowKeys, selectedRows) => void	-
onSelect	用户手动选择/取消选择某行的回调	(record, selected, selectedRows) => void	-
onSelectAll	用户手动选择/取消选择所有行的回调	(selected, selectedRowKeys, selectedRows) => void	-

menus

参数	说明	类型	默认值
key	菜单项唯一标识	string	-
label	菜单文案	string、 VNode	-
hide	菜单项是否隐藏	boolean ｜ (menu, {rowindexs, columns, records, source}) => boolean	-
disabled	菜单项是否禁用	(menu, {rowindexs, columns, records, source}) => boolean	-
handlerBefore	菜单项点击前回调函数，如返回 reject 的 promise 将阻止菜单执行	(menu, {rowindexs, columns, records, source}) => void	-
handler	菜单项点击回调	(menu, {rowindexs, columns, records, source}) => void	-
handlerAfter	菜单项点击点击后回调函数	(menu) => void	-
input	是否含输入框	boolean	-
inputDefaultValue	输入框默认值	number	1
inputPrecision	输入框精度	number	0
validator	输入框验证函数	((menu, { rowindexs, columns, records, source}) => Promise<string>)	-
inputProps	输入框 props	同and design vue，inputNumber组件props参数	-

customEditer

参数	说明	类型	默认值
singleSelectRow	是否只能单选行	boolean	-
singleSelectCell	是否只能单选格	boolean	-
disabledSelectTh	是否禁止选择表头	boolean	-
disabledSelectCell	是否禁止选择单元格	boolean	-
disabledSelectRow	是否禁止选择行	boolean	-
disabledOuterClickClearSelected	是否禁止表格区域外点击清除选区	boolean	-
selectedRowKeys	指定选中行的 key 数组 (受控)	string[]	-
onSelected	选中表格内容时回调, 比如单元格单选、复选、框选、行选、全选等回调	({rowindexs, columns, records, source}) => void	-
onEditBefore	编辑前回调函数，比如删除单元格数据、编辑单元格数据、删除行等，若返回Promise.reject, 将阻止更改数据	({rowindexs, columns, records, source}) => void | Promise<any>	-
onDeleteBefore	删除前回调函数，比如删除单元格数据、删除行等，若返回Promise.reject, 将阻止删除数据	({rowindexs, columns, records, source}) => void | Promise<any>	-
onChange	单元格内容 change 回调，同 input 的 onchange	({newValue, oldValue, column, record, rowindex}) => void	-
onBlur	单元格编辑失焦回调，同 input 的 onblur	({newValue, oldValue, column, record, rowindex}) => void	-
onFocus	单元格内容开始编辑回调	({value, column, record, rowindex}) => void	-
onClear	删除单元格内容回调	(data: {newValue, oldValue, column, record}[]) => void	-
onRemove	删除行回调	() => void	-
onSelectedAllHandel	全选，在onSelected回调触发前调用	(TABLE: TABLE) => void	-

VirtualScrollProps

参数	说明	类型	默认值
oneDataHeight	一条数据内容的高度，在开启虚拟滚动时至关重要	number	24
scrollLastFlag	是否向外触发滚动至底事件(scroll-last)	Boolean	false
scrollFlag	是否向外触发滚动事件(scroll)，会传出滚动的位移	Boolean	false
visibleBeforeCount	屏幕上方留几条缓冲数据	Number	10
visibleAfterCount	屏幕下方留几条缓冲数据	Number	10

Rule

参数	说明	类型	默认值
field	验证的字段路径，同column的dataIndex，如果配置在column中，则无需配置此值	string 、 string[]	-
trigger	验证时机，默认submit	'selected'、'blur' 、'change'、'submit'	submit
len	字符最大长度	number	-
min	最小值	number	-
max	最大值	number	-
message	错误提示文案	string	-
pattern	自定义正则验证	RegExp	-
required	必填	boolean	-
precision	数字最大精度	number	-
validator	自定义验证	({rule, value, record, rowindex}, (filedList?: FieldPath[], rowindex?: number) => Promise ) => Promise<unkonw>	-

FastKeyboard

参数	说明
Ctrl_C	开启复制快捷键
Ctrl_V	开启粘贴快捷键
Ctrl_Z	开启撤销快捷键
Ctrl_Y	开启重做快捷键
Delete	开启删除快捷键（删除单元格、删除行）

messageConfig

{
  "menus": {
    "copyLabel": "复制",
    "paetsLabel": "粘贴",
    "undoLabel": "撤销 (Ctrl + Z)",
    "redoLabel": "恢复 (Ctrl + Y)",
    "copyDownLabel": "向下填充-复制",
    "addStepDownLabel": "向下填充-递增",
    "insertBeforeLabel": "上方插入[input]行",
    "insertAfterLabel": "下方插入[input]行",
    "insertAfterCopyLabel": "向下复制[input]行",
    "deleteRowsLabel": "删除选中行"
  },
  "input": {
    "mustInt": "只能输入整数",
    "maxDecimal": "只能输入[]位小数"
  },
  "disabledMoreArea": "不能对多重选择区域执行此操作"
}

slots

名称	说明
headerSelect	表头选择插槽
headerRowindex	表头行号插槽
headerCell	表头插槽
head-[ column.slotName ]	指定表头插槽
bodyCell	表格内容
rowSelect	表格行行选择插槽
rowindex	表格行行号插槽
summary	扩展表格底部

组件

名称	说明
edit-table-input	文本输入
edit-table-input-number	数字输入
edit-table-select	表格下拉组件
edit-table-select-simple	表格下拉组件，只是简单的下拉， 没有复杂的交互，关注性能时优先使用此组件
edit-table-summary-row	扩展表格行
edit-table-summary-cell	扩展单元格，当没有指定colindex（number）时，将不能使用选择、复制功能。

事件

参数	说明	类型	默认值
afterInsertEmptyRow	插入新数据回调函数	(rowindex: number, record ) => void	-
warning	错误信息回调	(msg: string) => void	-
change	分页、排序、筛选变化时触发	Function(pagination, filters, sorter, { currentDataSource })	-

方法

参数	说明	类型	默认值
validate	验证指定列（字段）数据	(filedList?: FieldPath[], rowindex?: number) => Promise	-
validateFields	验证指定列（字段）数据, 不传入任何参数时，同validate方法	(filedList?: FieldPath[], rowindex?: number) => Promise	-
clearValidate	清除指定验证结果	(filedList?: FieldPath[], rowindex?: number) => void	-
scrollToField	滚动到第一个错误位置	() => void	-