Vue3 + Element Plus 配置化表单：开启高效表单开发新纪元✨vue-schema-demo 是基于 Vu

✨ Vue3 + Element Plus 配置化表单

在企业级应用开发的征程中，表单宛如一座重要的桥梁，承担着数据收集与交互的重任🌉。然而，传统表单开发方式如同在荆棘丛中前行，需要编写大量重复代码，面对多样化的业务需求和表单类型时，维护成本高得令人头疼😫。别担心，vue-schema-demo 项目带来的配置化表单解决方案，就像一把神奇的钥匙🔑，为你开启高效开发的大门。

示例图：

先上源码：⭐ github

演示地址：👉 vue-schema-demo

🌟 核心亮点：可配置表单的超级魅力

全面支持 Element Plus 表单组件 🎉

vue-schema-demo 的配置化表单就像一个装满宝藏的百宝箱🎁，全面兼容 Element Plus 提供的各类表单组件。无论是常见的 Input、Select、DatePicker，还是 RadioGroup、CheckboxGroup 等，都能通过简洁的配置轻松集成到表单中。只需要在 schema 中通过 type 属性指定组件类型，就能快速实现不同类型表单组件的渲染，简直太方便啦👏！

<template>
  <VForm :schema="schema" v-model:model="form"></VForm>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});
const schema = ref([
  { type: 'el-input', prop: 'inputField', label: '输入框' },
  { type: 'el-select', prop: 'selectField', label: '下拉框', multiple: true, options: ['选项1', '选项2'] },
  { type: 'el-date-picker', prop: 'dateField', label: '日期选择器' }
]);
</script>

可扩展自定义组件 🚀

除了丰富的 Element Plus 原生组件，配置化表单还支持自定义组件的扩展。这就好比给你提供了一个自由创作的舞台🎭，通过在 schema 中使用自定义配置项，开发者可以将自定义组件无缝集成到表单中，满足各种特定业务场景的需求，尽情发挥你的创意吧😎！

<template>
  <VForm :schema="schema" v-model:model="form"></VForm>
</template>

<script setup>
import { ref } from 'vue';
import CustomComponent from './CustomComponent.vue';

const form = ref({});
const schema = ref([
  { 
    prop: 'customField', 
    label: '自定义组件', 
    customCell: { value: CustomComponent } 
  }
]);
</script>

支持表格表单 📊

在实际业务中，表格表单是一种常见且重要的表单形式。vue-schema-demo 的配置化表单完美支持表格表单，通过在 schema 中简单配置即可实现表格数据的编辑和提交。就像给表格装上了智能引擎🚗，让数据管理变得轻松又高效！

<template>
  <VForm :schema="schema" v-model:model="form"></VForm>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  tableData: [
    { name: '张三', age: 20 },
    { name: '李四', age: 25 }
  ]
});
const schema = ref([
  { 
    prop: 'tableData', 
    label: '表格表单', 
    type: 'table',
    props: {
      size: 'auto',
      columns: [
        formCellColumn({
          label: '姓名',
          prop: 'name',
          customCell: { type: 'el-input', rules: rules.name }
        }),
        formCellColumn({
          label: '年龄',
          prop: 'age',
          customCell: { type: 'el-input-number', props: { min: 0, max: 100 } }
        })
      ]
    }
  }
]);
</script>

弹窗表单 VFormDialog 💬

在很多业务场景中，需要使用弹窗来进行表单的录入或编辑。vue-schema-demo 提供了 VFormDialog 组件，通过配置化的方式可以轻松实现弹窗表单。只需要在 schema 中定义好表单的结构，结合 VFormDialog 的相关属性，就能快速搭建出一个功能完善的弹窗表单，让用户交互更加便捷😃！

<template>
  <VFormDialog
    v-model:visible="dialogVisible"
    :schema="schema"
    v-model:model="form"
    :title="表单标题"
    @success="handleSuccess"
    @close="handleClose"
  ></VFormDialog>
  <el-button @click="dialogVisible = true">打开弹窗表单</el-button>
</template>

<script setup>
import { ref } from 'vue';

const dialogVisible = ref(false);
const form = ref({});
const schema = ref([
  { type: 'el-input', prop: 'name', label: '姓名' },
  { type: 'el-input-number', prop: 'age', label: '年龄' }
]);

const handleSuccess = () => {
  console.log('表单提交成功');
};

const handleClose = () => {
  console.log('弹窗关闭');
};
</script>

详情展示 VFormPanel 📋

在某些场景下，需要展示表单的详情信息。vue-schema-demo 提供了 VFormPanel 组件，通过 panel 配置可以轻松实现详情展示。只需要将需要展示的数据和对应的配置传入 VFormPanel 组件，就能以清晰、美观的方式展示表单详情，让信息查看更加直观👀！

<template>
  <VFormPanel :model="form" :panel="panel"></VFormPanel>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  name: '张三',
  age: 20,
  birthDate: '2000-01-01'
});
const panel = ref([
  { label: '姓名', prop: 'name', type: 'content' },
  { label: '年龄', prop: 'age', type: 'content' },
  { label: '出生日期', prop: 'birthDate', type: 'date' }
]);
</script>

📖 详细配置指南

筛选配置：FilterOptionType 关键属性

筛选配置是表单中常见的需求，vue-schema-demo 提供了丰富的筛选配置选项，支持多种表单组件和交互控制。就像给表单配备了一个强大的过滤器🧐，让你轻松筛选出所需的数据。

属性名	类型	默认值	描述
props	any	-	筛选组件属性
prop	string	-	筛选字段名
type	FormComponentType	-	筛选组件类型
models	ModelType[]	-	筛选模型
defaultValue	number \| string \| boolean \| Array<number \| string \| boolean>	-	默认值
label	string	-	筛选标签
hidden	boolean	false	是否隐藏筛选
multiple	boolean	false	是否多选
placeholder	string	-	筛选占位符
className	string	-	筛选类名
width	number \| string	-	筛选宽度
options	Array<{ label: string; value: string \| number \| boolean; child?: FilterOptionType; }>	-	筛选选项
childType	FormComponentType	-	子筛选组件类型
child	FilterOptionType	-	子筛选配置
clearFields	string[]	-	清除字段

列配置：ColumnType 核心字段

列配置用于定义表格表单的列信息，支持数据关联、布局控制、交互增强和高级渲染等功能。就像给表格制定了一套精确的规则📋，让表格更加整齐有序。

属性名	类型	默认值	描述
prop	string	-	列字段名
label	string	-	列标题
width	string \| number	-	列宽度
minWidth	string \| number	-	列最小宽度
sortable	boolean	false	是否可排序
children	ColumnType[]	-	子列配置
align	'left' \| 'center' \| 'right'	'left'	列对齐方式
fixed	boolean \| 'left' \| 'right'	false	是否固定列
showOverflowTooltip	boolean	false	是否显示溢出提示
formatter	(row: any, column: any, cellValue: any, index: number) => VNode \| string	-	单元格内容格式化函数
hidden	boolean	false	是否隐藏列
sort	number	-	排序值
textType	'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	-	文本类型
customCell	{ value?: Component }	-	自定义单元格内容

🛠 生态支持

开源协议：MIT 许可证，商业项目可自由使用
技术支持：GitHub 平台代码托管

🌟 加入我们

vue-schema-demo 持续迭代中，欢迎通过以下方式参与项目共建：

📥 下载源码：GitHub 仓库
🐛 反馈问题：通过 Issue 模板提交 BUG 反馈或功能建议

选择 vue-schema-demo，让表格开发从此高效而优雅！