FormEditList 可编辑列表

通过表单编辑列表条目，支持动态增删。每一项都是一个动态表单（DataForm 的子集），每条数据独立编辑、独立校验。适合条款列表、合同明细、动态参数等场景。

在线演示

import { defineComponent, ref } from 'vue'
import { ElButton } from 'element-plus'
import FormList from '@/components/FormEditList'

export default defineComponent({
  name: 'DemoFormEditListFull',
  setup() {
    const data = ref([
      { id: 1, title: '付款条款', content: '合同签订后 15 个工作日内支付 30% 预付款' },
      { id: 2, title: '交付条款', content: '收到预付款后 30 个工作日内完成交付' },
    ])

    return () => (
      <div class="demo-block">
        <h4 style="margin:0 0 12px;font-size:15px;">📋 可编辑条款列表</h4>
        <FormList
          modelValue={data.value}
          onUpdate:modelValue={(val: any) => (data.value = val)}
          columns={[
            { label: '条款标题', field: 'title', type: 'el-input' },
            { label: '条款内容', field: 'content', type: 'el-input', props: { type: 'textarea', rows: 2 } },
          ]}
          useAdd
          useRemove
          min={1}
          itemField="items"
          rowKey="id"
        />
        <ElButton style="margin-top:12px" onClick={() => console.log(JSON.stringify(data.value))}>
          打印数据
        </ElButton>
        <div style="margin-top:8px;font-size:13px;color:#666;font-family:monospace;">
          data: {JSON.stringify(data.value)}
        </div>
      </div>
    )
  },
})

Props

属性名	类型	默认值	说明
modelValue	any[]	-	列表数据（v-model）
columns	FormColumn[]	[]	编辑字段配置，支持所有 FormColumn 类型
itemField	string	-	必填。列表项的字段标识
rowKey	string	'id'	行唯一标识字段
useAdd	boolean | (item) => boolean	true	是否显示添加按钮
useRemove	boolean | (item) => boolean	true	是否显示删除按钮
min	number	1	最少保留行数
max	number	1000	最多添加行数
disabled	boolean	false	是否禁用
showLabel	boolean	true	是否显示 label
labelWidth	string | number	120	label 宽度
labelPosition	'top' | 'left' | 'right'	'top'	label 位置
colSpan	number	24	栅格占位
validateOnAdd	boolean	false	新增前是否校验
initItemData	(index) => object	-	新增行初始值

在 DataForm 中使用

通过 type: 'form-edit-list' 嵌入 DataForm：

const columns = [
  {
    label: '合同条款',
    field: 'terms',
    type: 'form-edit-list',
    props: {
      useAdd: true,
      useRemove: true,
      min: 1,
      columns: [
        { label: '标题', field: 'title', type: 'el-input' },
        { label: '内容', field: 'content', type: 'el-input', props: { type: 'textarea' } },
      ],
    },
  },
]

<DataForm model={model} columns={columns} />

事件

事件名	参数	说明
change	(value: any[])	列表数据变化时触发
itemChange	({ field, value, index, data })	某一条数据变化时触发
add	(insertIndex: number) => Promise<boolean>	新增前触发，返回 false 取消
remove	(row, index) => Promise<boolean>	删除前触发，返回 false 取消