edit-table-vue3

#### Description

基于 vue3 的可编辑表格

$3

| 参数 | 说明 | 类型 | 默认值 |
| ------------------------ | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------ |
| 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 | - |

$3

| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------------------------------ | ------------------------------ | -------- |
| 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 | - |

$3

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

$3

| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------- | ------ |
| 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) | - |
| inputProps | 输入框 props | 同and design vue，inputNumber组件props参数 | - |

$3

| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ---------------------------------------------------------------- | ------------------------------------------------- | ------ |
| 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 | - |
| onDeleteBefore | 删除前回调函数，比如删除单元格数据、删除行等，若返回Promise.reject, 将阻止删除数据 | ({rowindexs, columns, records, source}) => void \| Promise | - |
| 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 | - |




$3

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

$3

| 参数 | 说明 | 类型 | 默认值 |
| ---------------------- | ----------------------------------------------- | ------------------------------------------ | ------- |
| 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 | - |

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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