el-form-render

📖 介绍

What

el-form-render 基于 element-plus，但不限于 element-plus 组件。在完全继承 el-form 属性的基础上，进行扩展。一些非表单组件或自定义组件，例如图片上传和富文本编辑器，也可以集成，因此，用户可以使用一段json来呈现完整的表单。

Why

在我们的日常开发中，有很多带有表单的页面，通常形式结构相似，逻辑重复。el-form-render 没有复杂的逻辑。它仅将JSON转换为呈现表单项，节省编写业务逻辑的时间和精力，并减少重复代码。

📄 文档

https://huodoushigemi.github.io/el-form-render

🦄 快速开始

pnpm add el-form-render

<template>
  <Form ref="form" :model="model" :items="items" @submit="$refs.form.validate()" @reset="$refs.form.resetFields()">
    <el-form-item>
      <el-button type="primary" native-type="submit">提交</el-button>
      <el-button native-type="reset">重置</el-button>
    </el-form-item>
  </Form>
  
  <code><pre>model: {{ JSON.stringify(model, null, '  ') }}</pre></code>
</template>

<script setup>
import { reactive } from 'vue'
import Form from 'el-form-render'

const model = reactive({})

const items = [
  { lp: ['姓名', 'name'] },
  { lp: ['年龄', 'age'] },
  { lp: ['性别', 'sex'], type: 'switch' },
  { is: 'el-divider', children: '分割线' },
  { lp: ['备注', 'remark'], el: { type: 'textarea', autosize: { minRows: 2, maxRows: 4 } } }
]
</script>

📃 Item 属性

| 属性名 | 类型 | 默认值 | 描述 | | ------------ | ------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | lp | string[] | | label prop 的缩写 | | type | string | | 可以是 input select switch radio-group……默认 input，如果传入 options 属性则默认 select | | options | any[] | | | | get | (v, o) => any | | 格式化组件的输入值 | | set | (v, o) => any | | 格式化组件的输出值 | | el | object | | 输入组件的属性 | | defaultValue | any | | 默认值 | | is | string | ElFormItemRender | 渲染的组件名称，可以是任何组件 | | vIf | () => boolean | true | 控制组件是否渲染 |

其他属性与 el-form-item 完全一致

💡 Inspiration

thanks to el-form-renderer

👏 Contributing

If you have any questions or requests or want to contribute, please write the issue or give me a Pull Request freely.