Vue3通過JSON渲染ElementPlus表單的流程步驟

更新時間：2024年10月12日 08:57:13 作者：凱瑞不Carrey

這篇文章主要介紹了Vue3通過JSON渲染ElementPlus表單的流程步驟,文中通過代碼示例和圖文給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下

1、引言

在公司里遇到這樣一個需求：要做產(chǎn)品管理模塊，內(nèi)容不復雜，只是用Vue+Element寫表單，但是，這個功能里的屬性非常多，可能還涉及很多復雜且重復的業(yè)務。

按照常規(guī)開發(fā)經(jīng)驗，很簡單，寫好一個item，剩下一路Ctrl+C ...

但作為一個優(yōu)秀的牛碼人，總有更高級的辦法實現(xiàn)： 使用JSON渲染Element表單元素

技術(shù)棧：Vue3、ElementPlus

2、建立環(huán)境

首先，要有一個vue3項目，包含element-plus庫

這里我使用了vite官網(wǎng)提供的vue項目創(chuàng)建方式：開始 | Vite 官方中文文檔 (vitejs.cn)

創(chuàng)建完成后，用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、創(chuàng)建組件

在src/components目錄下，無用組件HelloWorld.vue可以刪除，新建目錄ConfigForm，包含一個index.vue文件

4、構(gòu)建基本功能

給組件<ConfigForm />寫入內(nèi)容

<!-- components/ConfigForm/index.vue -->

<script setup>

defineProps({
  modelValue: Object, // 綁定對象
  config: Object // 組件配置 config內(nèi)columns是需要渲染的表單元素
})

</script>

<template>
  <h3>配置式表單</h3>
  <!-- 表單框架 -->
  <el-form :model="modelValue" label-width="auto" style="max-width: 600px">
    <!-- 循環(huán)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繼承表單元素參數(shù) -->
        <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>綁定數(shù)據(jù)：</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式轉(zhuǎn)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">
    <!-- 循環(huán)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' }], // 此元素的校驗規(guī)則
    },

    ... 其他代碼

  ]
})

+ 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方法驗證整個表單