# 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)` | - | | 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` | - | | 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` | - | ### 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` | - | ### FastKeyboard | 参数 | 说明 | | ---------------------- | ------------------------- | | Ctrl_C | 开启复制快捷键 | | Ctrl_V | 开启粘贴快捷键 | | Ctrl_Z | 开启撤销快捷键 | | Ctrl_Y | 开启重做快捷键 | | Delete | 开启删除快捷键（删除单元格、删除行） | ### messageConfig ```json { "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` | `-` |