DynamicFields 动态表单字段组件

支持动态添加、删除、排序表单字段的组件。

基础用法

单行文本文本域数字下拉选择开关日期文件

暂无字段配置

<template>
  <x-dynamic-fields
    :fields="fields"
    :editable="true"
    :show-sort="true"
    :max-fields="20"
    @update:fields="handleUpdate"
    @add="handleAdd"
    @remove="handleRemove"
    @sort="handleSort"
    @update="handleFieldUpdate"
  />
</template>

<script setup>
import { ref } from 'vue'
import { DynamicFields } from '@xto/form'

const fields = ref([
  {
    id: '1',
    name: 'username',
    label: '用户名',
    type: 'input',
    required: true,
    placeholder: '请输入用户名',
    order: 0
  },
  {
    id: '2',
    name: 'email',
    label: '邮箱',
    type: 'input',
    required: true,
    placeholder: '请输入邮箱',
    order: 1
  },
  {
    id: '3',
    name: 'role',
    label: '角色',
    type: 'select',
    options: [
      { label: '管理员', value: 'admin' },
      { label: '普通用户', value: 'user' }
    ],
    order: 2
  }
])

const handleUpdate = (updatedFields) => {
  fields.value = updatedFields
}

const handleAdd = (field) => {
  console.log('添加字段:', field)
}

const handleRemove = (fieldId) => {
  console.log('删除字段:', fieldId)
}

const handleSort = (sortedFields) => {
  console.log('排序字段:', sortedFields)
}

const handleFieldUpdate = (fieldId, field) => {
  console.log('更新字段:', fieldId, field)
}
</script>

字段类型

支持多种字段类型。

单行文本文本域数字下拉选择开关日期文件

暂无字段配置

<script setup>
const availableTypes = [
  { label: '单行文本', value: 'input' },
  { label: '文本域', value: 'textarea' },
  { label: '数字', value: 'number' },
  { label: '下拉选择', value: 'select' },
  { label: '开关', value: 'switch' },
  { label: '日期', value: 'date' },
  { label: '文件', value: 'file' }
]
</script>

添加字段

组件顶部提供添加字段功能。

<template>
  <x-dynamic-fields
    :fields="fields"
    :available-types="availableTypes"
    @add="handleAdd"
  />
</template>

<script setup>
// 自定义可用类型
const availableTypes = [
  { label: '文本输入', value: 'input' },
  { label: '多行文本', value: 'textarea' },
  { label: '选择器', value: 'select' }
]
</script>

字段排序

单行文本文本域数字下拉选择开关日期文件

暂无字段配置

<template>
  <x-dynamic-fields :fields="fields" :show-sort="true" @sort="handleSort" />
</template>

限制字段数量

<template>
  <x-dynamic-fields :max-fields="10" />
</template>

禁用编辑

暂无字段配置

<template>
  <!-- 只读模式，无法添加、删除、编辑 -->
  <x-dynamic-fields :fields="fields" :editable="false" />
</template>

空状态

单行文本文本域数字下拉选择开关日期文件

暂无字段配置

<template>
  <x-dynamic-fields :fields="[]" />
</template>

API

Props

属性	说明	类型	默认值
fields	字段列表	DynamicField[]	[]
editable	是否可编辑	boolean	true
showSort	是否显示排序按钮	boolean	true
maxFields	最大字段数	number	20
availableTypes	可用的字段类型	Array<{ label: string; value: string }>	见下方

默认 availableTypes

[
  { label: '单行文本', value: 'input' },
  { label: '文本域', value: 'textarea' },
  { label: '数字', value: 'number' },
  { label: '下拉选择', value: 'select' },
  { label: '开关', value: 'switch' },
  { label: '日期', value: 'date' },
  { label: '文件', value: 'file' }
]

DynamicField

属性	说明	类型
id	字段唯一标识	string
name	字段名称（变量名）	string
label	字段标签（显示名）	string
type	字段类型	'input' | 'textarea' | 'select' | 'number' | 'switch' | 'date' | 'file'
required	是否必填	boolean
defaultValue	默认值	any
placeholder	占位文本	string
options	下拉选项	Array<{ label: string; value: any }>
order	排序序号	number

Events

事件名	说明
update:fields	字段列表变化时触发
add	添加字段时触发
remove	删除字段时触发
sort	字段排序时触发
update	更新单个字段时触发