梦想之都-俊月星空 › 门户 ›站长分享› 前端开发 › 查看内容

Vue3通过JSON渲染ElementPlus表单的流程步调

2024-11-2 22:33| 发布者: 44f6fa4f5| 查看: 59| 评论: 0

摘要: 目录1、引言2、创建情况3、创建组件4、构建基本功能5、须要扩展：校验6、技能点1、引言在公司里遇到如许一个需求：要做产品管理模块，内容不复杂，只是用Vue+Element写表单，但是，这个功能里的属性非常多，大概还

1、引言

在公司里遇到如许一个需求：要做产品管理模块，内容不复杂，只是用Vue+Element写表单，但是，这个功能里的属性非常多，大概还涉及很多复杂且重复的业务。

按照通例开发经验，很简单，写好一个item，剩下一起Ctrl+C ...

但作为一个优秀的牛码人，总有更高级的办法实现： 使用[code]JSON[/code]渲染[code]Element[/code]表单元素

技能栈：[code]Vue3[/code]、[code]ElementPlus[/code]

2、创建情况

起首，要有一个[code]vue3[/code]项目，包含[code]element-plus[/code]库

这里我使用了[code]vite[/code]官网提供的[code]vue[/code]项目创建方式：开始 | Vite 官方中文文档 (vitejs.cn)

创建完成后，用[code]yarn[/code]添加了[code]element-plus[/code]包

修改[code]src/main.js[/code]，引入[code]element-plus[/code]库

[code]// 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') [/code]

3、创建组件

在[code]src/components[/code]目录下，无用组件[code]HelloWorld.vue[/code]可以删除，新建目录[code]ConfigForm[/code]，包含一个[code]index.vue[/code]文件

4、构建基本功能

给组件[code]<ConfigForm />[/code]写入内容

[code] <script setup> defineProps({ modelValue: Object, // 绑定对象 config: Object // 组件配置 config内columns是必要渲染的表单元素 }) </script> <template> <h3>配置式表单</h3>  <el-form :model="modelValue" label-width="auto" style="max-width: 600px">  <template v-for="(item, index) in config.columns" :key="item.prop"> <el-form-item :label="item.label" :prop="item.prop">  <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> [/code]

找一个页面使用它

为了方便演示，我使用了[code]APP.vue[/code]

[code] <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 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> [/code]

如许就达成了[code]template[/code]式转[code]JSON[/code]式的目的

结果图：

5、须要扩展：校验

既然是表单，那么肯定少不了验证

这里很简单，只必要在[code]<el-form-item />[/code]标签上绑定[code]rules[/code]就可以见效

[code] <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">  <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> [/code]

然后再[code]APP.vue[/code]中，给[code]config.columns[/code]的项增长[code]rules[/code]属性

[code] <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 v-model="formData" :config="config" /> + <ConfigForm v-model="formData" :config="config" ref="configFormRef" /> + <el-button type="primary" @click="onSubmit()">校验并提交</el-button> ... 其他代码 </template> [/code]

如许设定的[code]rules[/code]就见效了，而且可以使用[code]onSubmit[/code]方法验证整个表单