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

// 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')

<!-- 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 -->

<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>

<!-- 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 -->

<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>