EditTable

EditTable combines el-table and el-form to provide inline cell editing, batch paste, per-cell validation, and Excel-like vertical drag fill.

Basic Usage

Basic editable table with column configuration.

Drag Fill

Set dragCopy to enable Excel-like vertical fill-handle copying.

Validation

Use rules in the column config to validate each editable cell.

Behavior Notes

Each non-operateCol column renders EditCell by default. If a column defines render, that renderer replaces the built-in editor for the column.
Set prop: 'operateCol' to render an operation column. That column does not participate in inline editing, paste fill, or validation.
Pasting supports both plain text and HTML tables copied from spreadsheet-like sources.
When paste-limit is false, pasting beyond the current data length appends new rows automatically.
Disabled cells are skipped during paste and drag fill. Pasted text also respects the column maxlength.
When drag-copy is enabled, EditTable forces table borders on and copies the start cell value vertically within the same column.
The exposed validation methods proxy the internal el-form, so field paths follow the row-array model such as [0].name.

API

EditTable Attributes

Name	Description	Type	Default
table-data / v-model:table-data	editable row data	`array`	[]
table-columns	column configuration array	`array`	[]
height	table height	`string` / `number`	`'auto'`
paste-limit	stop pasting when the current row count is reached instead of appending rows	`boolean`	false
border	show table border; automatically treated as `true` when `drag-copy` is enabled	`boolean`	false
no-index	hide the built-in index column	`boolean`	false
use-virtual	enable virtual scrolling	`boolean`	false
span-method	cell merge calculation method for row/column spanning; params and return value mirror `el-table` `span-method`	`Function`	—
drag-copy	enable vertical fill-handle copying	`boolean`	false
need-batch-copy	let inner cells intercept paste and hand it to the table paste logic	`boolean`	true

EditTableColumn Configuration

Name	Description	Type	Default
prop	field name	`string`	—
label	column header text	`string`	—
label-render	custom header render function	`Function`	—
rules	validation rules used by the wrapping `el-form-item`	`array`	—
element	editor type passed to `EditCell`	`string`	`'el-input'`
options	option list used by select-like editors	`array`	—
is-disabled	control whether the current cell is disabled	`Function`	—
min-width	column minimum width	`string` / `number`	—
width	column width	`string` / `number`	—
fixed	fixed column position	`enum`	—
always-edit	always show the editor instead of click-to-edit mode	`boolean`	false
maxlength	max text length applied during paste handling	`number`	—
render	custom cell renderer; when provided, it replaces the built-in `EditCell` renderer	`Function`	—
suffix-render	custom suffix renderer displayed after `EditCell`	`Function`	—

Any extra column fields are forwarded to the inner EditCell as item-props, so editor-specific props such as placeholder, clearable, filterable, format, min, and max can be set directly on the column config.

EditTable Events

Name	Description	Type
update:table-data	emitted when row data changes through editing, paste, or drag fill	`Function`
after-paste	emitted after table paste handling finishes	`Function`
change	emitted when a cell value change is committed	`Function`
focus	emitted when a cell editor receives focus	`Function`

Exposes

Name	Description	Type
validate	proxy of the internal `el-form` `validate()` method	`Function`
validateField	proxy of the internal `el-form` `validateField()` method	`Function`
clearValidate	proxy of the internal `el-form` `clearValidate()` method	`Function`

Source

Docs

BaseTable

EditCell

EditTable ​

Basic Usage ​

Drag Fill ​

Validation ​

Behavior Notes ​

API ​

EditTable Attributes ​

EditTableColumn Configuration ​

EditTable Events ​

Exposes ​

Source ​