FormEditTable 可编辑表格

基于 Element Plus ElTableV2（虚拟滚动）的可编辑表格组件，适合大数据量行内编辑场景。支持三种编辑模式，内嵌增删行、校验、格式化等功能。

在线演示

import { defineComponent, ref } from 'vue'
import { ElMessage as message } from 'element-plus'
import FormEditTable from '@/components/FormEditTable'

export default defineComponent({
  name: 'DemoFormEditTableFull',
  setup() {
    const data1 = ref([
      { id: 1, name: '商品A', qty: 2, price: 99.9 },
      { id: 2, name: '商品B', qty: 1, price: 199.9 },
    ])

    const data2 = ref([
      { id: 1, name: '商品A', qty: 2, price: 99.9 },
      { id: 2, name: '商品B', qty: 1, price: 199.9 },
    ])

    const data3 = ref([
      { id: 1, name: '商品A', qty: 2, price: 99.9 },
      { id: 2, name: '商品B', qty: 1, price: 199.9 },
    ])

    const columns: any[] = [
      { label: '商品名', field: 'name', editType: 'el-input', width: 180 },
      { label: '数量', field: 'qty', editType: 'el-input-number', width: 120, editProps: { min: 1, controls: false } },
      { label: '单价', field: 'price', editType: 'el-input-number', width: 120, editProps: { min: 0, precision: 2, controls: false } },
      {
        label: '小计',
        field: 'subtotal',
        width: 120,
        cellRenderer: ({ rowData }: any) => `¥${((rowData.qty ?? 0) * (rowData.price ?? 0)).toFixed(2)}`,
      },
    ]

    return () => (
      <div style="display:flex;flex-direction:column;gap:24px;">
        <div class="demo-block">
          <h4 style="margin:0 0 12px;font-size:15px;">✏️ 行编辑模式 (editMode=row)</h4>
          <p style="margin:0 0 8px;font-size:13px;color:#666;">
            编辑完按 Enter 确认该格，再点行尾"保存"提交。点"取消"则恢复原始数据。
          </p>
          <FormEditTable
            modelValue={data1.value}
            columns={columns}
            editMode="row"
            rowKey="id"
            height={200}
            min={1}
            onSave={(row: any) => {
              // 替换数据源中的对应行，模拟接口保存成功后替换
              const idx = data1.value.findIndex((r) => r.id === row.id)
              if (idx > -1) {
                data1.value = data1.value.map((r, i) => (i === idx ? { ...row } : r))
              }
              message.success(`已保存: ${row.name}`)
            }}
          />
          <div style="margin-top:8px;font-size:13px;color:#666;font-family:monospace;">
            data: {JSON.stringify(data1.value)}
          </div>
        </div>
        <div class="demo-block">
          <h4 style="margin:0 0 12px;font-size:15px;">📝 单元格编辑模式 (editMode=cell)</h4>
          <p style="margin:0 0 8px;font-size:13px;color:#666;">
            点击单元格进入编辑，编辑完成后点击其它区域或按 Enter 自动保存当前格。
          </p>
          <FormEditTable
            modelValue={data2.value}
            columns={columns}
            editMode="cell"
            rowKey="id"
            height={200}
          />
          <div style="margin-top:8px;font-size:13px;color:#666;font-family:monospace;">
            data: {JSON.stringify(data2.value)}
          </div>
        </div>
        <div class="demo-block">
          <h4 style="margin:0 0 12px;font-size:15px;">📋 全表编辑模式 (editMode=table)</h4>
          <p style="margin:0 0 8px;font-size:13px;color:#666;">
            所有单元格始终可编辑，类似 Excel。行尾 +/- 增删行，修改即时生效。
          </p>
          <FormEditTable
            modelValue={data3.value}
            columns={columns}
            editMode="table"
            rowKey="id"
            height={200}
            min={1}
          />
          <div style="margin-top:8px;font-size:13px;color:#666;font-family:monospace;">
            data: {JSON.stringify(data3.value)}
          </div>
        </div>
      </div>
    )
  },
})

Props

属性名	类型	默认值	说明
modelValue	any[]	[]	表格数据数组（v-model）
columns	FormEditTableColumn[]	[]	编辑列配置
editMode	'row' | 'cell' | 'table'	'row'	编辑模式
rowKey	string	'id'	行唯一标识字段
height	number	500	表格高度
rowHeight	number	36	行高
min	number	0	最少保留行数（低于此数不显示删除按钮）
beforeAdd	(row) => Promise<boolean>	-	新增前钩子，返回 false 取消
beforeSave	(row) => Promise<boolean>	-	保存前钩子，返回 false 取消
beforeRemove	(row) => Promise<boolean>	-	删除前钩子
showRemove	(row) => boolean	() => true	是否显示删除按钮
showEdit	(row) => boolean	() => true	是否显示编辑按钮
operateButtons	Button[]	-	自定义操作按钮（行编辑模式）
props	Object	-	透传 ElTableV2 的其他属性

编辑列配置 FormEditTableColumn

属性名	类型	说明
label	string	列标题
field	string	字段名
editType	string	编辑控件类型：el-input、el-input-number、el-select
editProps	Object	透传给编辑控件的属性（如 min、max、precision）
width	number	列宽
formatter	(value, row) => string	非编辑状态下的格式化显示
rules	Rule[]	校验规则

三种编辑模式

行编辑模式 (editMode=row)

默认模式。点击行中的"编辑"按钮使该行进入编辑状态，修改后点"保存"或"取消"。

• 新增行自动进入编辑状态
• 取消编辑自动恢复原始数据
• 新增未保存的行取消时自动删除

单元格编辑模式 (editMode=cell)

点击单元格使其进入编辑状态，编辑完成后自动保存。

• 点击即编辑，失去焦点即保存
• 适合快速逐格修改

全表编辑模式 (editMode=table)

所有单元格始终处于可编辑状态，类似 Excel。

• 每行末尾有 + / - 按钮用于增删行
• 适合批量数据录入

实例方法

通过 ref 调用：

方法	说明
add(index?)	新增一行，可指定插入位置
edit(index)	编辑指定行
remove(index)	删除指定行