Edit-table-vue3 NPM

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

编辑表格 vue3 可编辑表格

@vueuse/core ant-design-vue number-precision sortablejs uuid vue

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

8 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

9 months ago

9 months ago

10 months ago

10 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago