# edit-table-vue3 **Repository Path**: dmui/edit-table-vue3 ## Basic Information - **Project Name**: edit-table-vue3 - **Description**: 可编辑表格 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2024-06-21 - **Last Updated**: 2026-01-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 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` | | showColDrag | 是否开启拖拽列功能 | `boolean` | `false` | | 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) => ({ onclick, .... }), 函数返回内容同and design vue` | - | | customEditer | 编辑项配置 | `customEditer` | - | | selectedStyleBorderWidth | 选择边框宽度 | `string` | `1px` | | selectedStyleBorderColor | 选择边框颜色 | `string` | `rgba(0, 127, 255, 0.5)` | | messageConfig | 文案配置 | `JSON` | `messageConfig` | | openUndo | 是否启用撤销、重做 | `boolean` | `true` | | rules | 表格数据验证 | `Rule 、Rule[]` | `-` | ### 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 | 是否打开排序，或者自定义排序函数 | `boolean、(type: sortOrder) => void` | `false` | ### 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` | - | | onChange | 单元格内容 change 回调，同 input 的 onchange | `({newValue, oldValue, column, record}) => void` | - | | onBlur | 单元格编辑失焦回调，同 input 的 onblur | `({newValue, oldValue, column, record}) => void` | - | | onFocus | 单元格内容开始编辑回调 | `({value, column, record}) => void` | - | | onClear | 删除单元格内容回调 | `(data: {newValue, oldValue, column, record}[]) => void` | - | | onRemove | 删除行回调 | `() => 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` | - | ### messageConfig ```json { "menus": { "copyLabel": "复制", "paetsLabel": "粘贴", "undoLabel": "撤销 (Ctrl + Z)", "redoLabel": "恢复 (Ctrl + Y)", "copyDownLabel": "向下填充-复制", "addStepDownLabel": "向下填充-递增", "insertBeforeLabel": "上方插入[input]行", "insertAfterLabel": "下方插入[input]行", "insertAfterCopyLabel": "向下复制[input]行", "deleteRowsLabel": "删除选中行" }, "input": { "mustInt": "只能输入整数", "maxDecimal": "只能输入[]位小数" }, "disabledMoreArea": "不能对多重选择区域执行此操作" } ``` ### 事件 | 参数 | 说明 | 类型 | 默认值 | | ------------------ | ---------------------------------------------- | --------- | ------- | | afterInsertEmptyRow | 插入新数据回调函数 | `(rowindex: number, record ) => void` | `-` | | warning | 错误信息回调 | `(msg: string) => void` | `-` | ### 方法 | 参数 | 说明 | 类型 | 默认值 | | ------------------ | ---------------------------------------------- | --------- | ------- | | validate | 验证指定列（字段）数据 | `(filedList?: FieldPath[], rowindex?: number) => Promise` | `-` | | validateFields | 验证指定列（字段）数据, 不传入任何参数时，同validate方法 | `(filedList?: FieldPath[], rowindex?: number) => Promise` | `-` | | clearValidate | 清除指定验证结果 | `(filedList?: FieldPath[], rowindex?: number) => void` | `-` | | scrollToField | 滚动到第一个错误位置 | `() => void` | `-` |