How to Build a Fully Editable Table with ElementPlus in Vue 3

ElementPlus does not include a built‑in editable table, so this article demonstrates how to implement a reusable <EditTable> component that extends <el-table> while preserving its usage pattern.

Prepare Data

Define an array of objects as the table source.

const tableData = [
  { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }
];

Basic Table

The basic table works like <el-table> except that the data prop is renamed to data-source on <EditTable>. All other attributes remain unchanged.

Editable Table

Each <EditTableColumn> provides a default slot and a named #edit slot. The default slot displays the cell value, while the #edit slot contains a form component bound with v-model="row.*" for two‑way editing.

Use row to access the current row data inside the slot.

Use actions.startEditable($index) to enter edit mode, actions.saveEditable($index) to save (with validation), actions.cancelEditable($index) to cancel, and actions.deleteRow($index) to delete a row.

Delete Effect

Add a delete button in the operation column and call actions.deleteRow($index) to remove the corresponding row.

Add Row Effect

The component does not render an add button itself; instead it exposes actions.addRow. Callers can place a button wherever they need and invoke addEditTableRef?.editActions.addRow() to append a new editable row.

Form Validation

<EditTableColumn>

accepts a :rules prop that works like the rules of an el-form. Validation rules are defined using the async-validator format.

Validation rules for the table columns follow the same syntax as ElementPlus form validation.

Retrieve Edited Data

The <EditTable> component exposes a reactive resultData object that always reflects the latest table content. It can be displayed with {{ formEditTableRef?.resultData }}.

Alternative Data Configuration

Besides the data-source prop, <EditTable> also supports a request prop that receives a function returning a promise of data. When both are provided, the component merges the two data sets.

EditTable Attributes

data-source (array): the data displayed in the table.

request (function): a function that returns data; if both data-source and request are set, the final rendering merges the two results.

EditTable Methods

editActions.addRow : add a new row in edit mode.

editActions.deleteRow : delete a specific row regardless of its edit state.

editActions.startEditable : switch a row to edit mode.

editActions.saveEditable : validate and save the edited row; on success the data updates.

editActions.cancelEditable : cancel edit mode for a row.

Source Code

The component is simple enough that it is not published to npm; the demo and source are available on GitHub and CodeSandbox.

Conclusion

All <el-table> attributes can be used on <EditTable>. Once you are familiar with <el-table>, you can immediately adopt <EditTable> for editable table needs.