Vue3通过JSON渲染ElementPlus表单的流程步骤_Vue.js

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方法验证整个表单