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[] | - | | 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 | - |

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 | | 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)[]|-` |

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