Vue3通过JSON渲染ElementPlus表单的流程步骤
作者：凯瑞不Carrey
这篇文章主要介绍了Vue3通过JSON渲染ElementPlus表单的流程步骤,文中通过代码示例和图文给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
1、引言
在公司里遇到这样一个需求：要做产品管理模块，内容不复杂，只是用Vue+Element写表单，但是，这个功能里的属性非常多，可能还涉及很多复杂且重复的业务。
按照常规开发经验，很简单，写好一个item，剩下一路Ctrl+C ...
但作为一个优秀的牛码人，总有更高级的办法实现： 使用JSON渲染Element表单元素
技术栈：Vue3、ElementPlus
2、建立环境
首先，要有一个vue3项目，包含element-plus库
这里我使用了vite官网提供的vue项目创建方式：开始 | Vite 官方中文文档 (vitejs.cn)
创建完成后，用yarn添加了element-plus包
修改src/main.js，引入element-plus库
// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
const app = createApp(App)
// 引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
app.mount('#app')
3、创建组件
在src/components目录下，无用组件HelloWorld.vue可以删除，新建目录ConfigForm，包含一个index.vue文件
4、构建基本功能
给组件<ConfigForm />写入内容
<!-- components/ConfigForm/index.vue -->
<script setup>
defineProps({
modelValue: Object, // 绑定对象
config: Object // 组件配置 config内columns是需要渲染的表单元素
})
</script>
<template>
<h3>配置式表单</h3>
<!-- 表单框架 -->
<el-form :model="modelValue" label-width="auto" style="max-width: 600px">
<!-- 循环config.columns，使用 <el-form-item /> 渲染表单元素 -->
<template v-for="(item, index) in config.columns" :key="item.prop">
<el-form-item :label="item.label" :prop="item.prop">
<!-- 通过type判断是哪一种表单元素，v-bind继承表单元素参数 -->
<el-input v-if="item.type === 'input'" v-model="modelValue[item.prop]" v-bind="item.props" />
<el-select v-else-if="item.type === 'select'" v-model="modelValue[item.prop]" v-bind="item.props">
<el-option v-for="o in item.options" :key="o.value" :label="o.label" :value="o.value" />
</el-select>
</el-form-item>
</template>
</el-form>
</template>
找一个页面使用它
为了方便演示，我使用了APP.vue
<!-- APP.vue -->
<script setup>
import { ref } from 'vue'
import ConfigForm from './components/ConfigForm/index.vue' // 引入组件
/**ConfigForm绑定对象 */
const formData = ref({})
/**ConfigForm配置 */
const config = ref({
columns: [
{
prop: 'name',
label: '姓名',
type: 'input',
props: { clearable: true, placeholder: '请输入姓名' }, // 继承到 <el-input /> 的props
},
{
prop: 'sex',
label: '性别',
value: '1',
type: 'select',
options: [{ label: '男', value: 'man' }, { label: '女', value: 'woman' }],
},
]
})
</script>
<template>
<!-- 使用 <ConfigForm /> -->
<ConfigForm v-model="formData" :config="config" />
<div>
<b>绑定数据：</b>
<div v-for="(value, key) in formData" style="display: grid; grid-template-columns: 100px 1fr 200px;">
<b>{{ key }}</b>
<b>：</b>
<span>{{ value }}</span>
</div>
</div>
</template>
这样就达成了template式转JSON式的目的
效果图：
5、必要扩展：校验
既然是表单，那么肯定少不了验证
这里很简单，只需要在<el-form-item />标签上绑定rules就可以生效
<!-- components/ConfigForm/index.vue -->
<script setup>
+ import { ref } from 'vue'
... 其他代码
+ const mainRef = ref(null)
+ defineExpose({ mainRef }) // 暴露mainRef给父组件使用
</script>
<template>
<h3>配置式表单</h3>
<!-- 表单框架 -->
- <el-form :model="modelValue" label-width="auto" style="max-width: 600px">
+ <el-form :model="modelValue" label-width="auto" style="max-width: 600px" ref="mainRef">
<!-- 循环config.columns，使用 <el-form-item /> 渲染表单元素 -->
<template v-for="(item, index) in config.columns" :key="item.prop">
- <el-form-item :label="item.label" :prop="item.prop">
+ <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
... 其他代码
</el-form-item>
</template>
</el-form>
</template>
然后再APP.vue中，给config.columns的项增加rules属性
<!-- APP.vue -->
<script setup>
+ import { ElMessage } from 'element-plus'
... 其他代码
/**ConfigForm配置 */
const config = ref({
columns: [
{
prop: 'name',
label: '姓名',
type: 'input',
props: { clearable: true, placeholder: '请输入姓名' }, // 继承到 <el-input /> 的props
+ rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }], // 此元素的校验规则
},
... 其他代码
]
})
+ const configFormRef = ref()
+ /**提交表单 */
+ const onSubmit = async () => {
+ let submitFlag = true
+ // 校验
+ const valid = await configFormRef.value.mainRef.validate().catch((err) => err)
+ if (valid !== true) {
+ submitFlag = false
+ }
+ if (submitFlag) {
+ ElMessage.success('校验成功')
+ } else {
+ ElMessage.error('校验失败')
+ }
+ }
</script>
<template>
<!-- 使用 <ConfigForm /> -->
- <ConfigForm v-model="formData" :config="config" />
+ <ConfigForm v-model="formData" :config="config" ref="configFormRef" />
+ <el-button type="primary" @click="onSubmit()">校验并提交</el-button>
... 其他代码
</template>
这样设定的rules就生效了，而且可以使用onSubmit方法验证整个表单
6、技术点
- 父子传参（defineProps）
- 数据绑定（v-model、v-bind）
- 循环处理（v-for、v-if、v-else）
详细功能可以在网上查阅
以上就是Vue3通过JSON渲染ElementPlus表单的流程步骤的详细内容，更多关于Vue3 JSON渲染ElementPlus的资料请关注脚本之家其它相关文章！