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

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

messageConfig

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