Vue3 如何通過json配置生成查詢表單

更新時間：2025年09月15日 16:28:33 作者：Martin-Luo

本文給大家介紹Vue3如何通過json配置生成查詢表單,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

功能實現(xiàn)背景

通過Vue3實現(xiàn)后臺管理項目一定含有表格功能，通常離不開表單。于是通過json配置來生成表單的想法由然而生

注意：
1.項目依賴element-plus

使用規(guī)則
1. 組件支持使用v-model管理值，當v-model不配置時也可以通過@finish事件獲取表單值
2. 當FormRender組件設置v-model后，schema配置項中defaultValue設置的默認值無效
3. 項目默認查詢和重置事件，也支持插槽自定義事件
4. 通過插槽自定義事件時，可以通過插槽獲取表單值，也可以通過組件暴露屬性和方法獲取el-form屬性&方法和表單值

項目代碼

創(chuàng)建type/index.ts文件

import { type Component } from 'vue'
export type ObjAny = { [T: string]: any }
export interface SchemaItem {
  key: string // 唯一標識 & 表單項v-model的屬性
  label: string // form-item 的label屬性
  type?: 'input' | 'select' // 支持 el-input 和 el-select組件
  defaultValue?: any // 當組件未配置v-model屬性，可自定義默認值
  component?: Component // 自定義組件
  props?: { [K: string]: any } // 組件屬性：繼承el-form表單組件屬性
}

創(chuàng)建FormRender.vue文件

<template>
  <el-form ref="formRef" :model="dataForm" :inline="true">
    <el-form-item v-for="item in schema" :key="item.key" :label="item.label" :prop="item.key">
      <!-- 自定義組件 -->
      <template v-if="item.component">
        <component :is="item.component" v-bind="item.props" v-model="dataForm[item.key]" />
      </template>
      <!-- el-select -->
      <template v-else-if="item.type === 'select'">
        <el-select v-bind="item.props" v-model="dataForm[item.key]" />
      </template>
      <!-- 默認： el-input -->
      <template v-else>
        <el-input v-bind="item.props" v-model="dataForm[item.key]" />
      </template>
    </el-form-item>
    <!-- 事件插槽，默認查詢和重置功能，支持自定義 -->
    <slot name="handle" :data="{ ...dataForm }">
      <el-form-item v-if="showFinish || showReset">
        <el-button v-if="showFinish" :loading="loading" type="primary" @click="handleClick">{{ textFinish }}</el-button>
        <el-button v-if="showReset" type="primary" @click="handleReset">{{ textReset }}</el-button>
      </el-form-item>
    </slot>
  </el-form>
</template>
<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { reactive, useTemplateRef } from 'vue'
import {ObjAny, SchemaItem} from 'type/index.ts'
defineOptions({
  name: 'FormRender'
})
const props = withDefaults(
  defineProps<{
    showFinish?: boolean
    showReset?: boolean
    textFinish?: string
    textReset?: string
    schema: SchemaItem[]
  }>(),
  {
    showFinish: true,
    showReset: true,
    textFinish: '查詢',
    textReset: '重置'
  }
)
const emit = defineEmits<{
  (e: 'finish', data: ObjAny): void
  (e: 'reset', data: ObjAny): void
}>()
const dataForm = defineModel() as ObjAny
const loading = defineModel('loading', { type: Boolean, default: false })
const formRef = useTemplateRef<FormInstance | null>('formRef')
initForm()
/**
 * 當組件未定義 v-model，內部生成form data
 */
function initForm() {
  if (dataForm.value === undefined) {
    const defaultForm: { [T: string]: any } = reactive({})
    props.schema.forEach(item => {
      defaultForm[item.key] = item.defaultValue || ''
    })
    if (dataForm.value === undefined) {
      dataForm.value = defaultForm
    }
  }
}
/**
 * finish
 */
function handleClick() {
  emit('finish', { ...dataForm.value })
}
/**
 * reset
 */
function handleReset() {
  formRef.value?.resetFields()
  emit('reset', { ...dataForm.value })
}
// 默認暴露的屬性和方法，可自行添加
defineExpose({
  elFormInstance: formRef,
  reset: handleReset
})
</script>

案例

簡單渲染和取值：未使用v-model

<FormRender :schema="schema" @finish="handleSubmit" />
<script lang="ts" setup>
import FormRender from './FormRender.vue'
import {ElInput} from 'element-plus'
import {ref, onMounted, computed} from 'vue'
import {ObjAny, SchemaItem} from 'type/index.ts'
const options = ref<{ label: string; value: string }[]>([])
// 默寫數(shù)據(jù)需要通過網(wǎng)絡請求獲取，所有需要使用到 computed
const schema = computed<SchemaItem[]>(() => [
  {
    key: 'content',
    label: '名稱',
    type: 'input',
    defaultValue: '張三',
    props: {
      placeholder: '請輸入名稱',
      clearable: true,
      style: {
        width: '200px'
      }
    }
  },
  {
    key: 'orderNo',
    label: '訂單號',
    defaultValue: '20250012',
    component: ElInput,
    props: {
      placeholder: '請輸入訂單號',
      clearable: true,
      style: {
        width: '200px'
      }
    }
  },
  {
    key: 'state',
    label: '狀態(tài)',
    type: 'select',
    props: {
      placeholder: '請選擇狀態(tài)',
      clearable: true,
      options: options.value,
      style: {
        width: '200px'
      }
    }
  }
])
function handleSubmit(value: ObjAny) {
  console.log(value)
}
onMounted(() => {
 // 模擬網(wǎng)絡請求數(shù)據(jù)
  options.value = [
    {
      value: '1',
      label: 'Option1'
    },
    {
      value: '2',
      label: 'Option2'
    },
    {
      value: '3',
      label: 'Option3'
    }
  ]
})
</script>

使用v-model

<FormRender v-model='data' :schema="schema" @finish="handleSubmit" />
<script lang="ts" setup>
import FormRender from './FormRender.vue'
import {ElInput} from 'element-plus'
import {ref, onMounted, computed} from 'vue'
import {ObjAny, SchemaItem} from 'type/index.ts'
const data = ref({
  content: '張三',
  orderNo: '20250012',
  state: ''
})
const options = ref<{ label: string; value: string }[]>([])
// 默寫數(shù)據(jù)需要通過網(wǎng)絡請求獲取，所有需要使用到 computed
// 當使用v-model時, defaultValue值將失效
const schema = computed<SchemaItem[]>(() => [
  {
    key: 'content',
    label: '名稱',
    type: 'input',
    props: {
      placeholder: '請輸入名稱',
      clearable: true,
      style: {
        width: '200px'
      }
    }
  },
  {
    key: 'orderNo',
    label: '訂單號',
    component: ElInput,
    props: {
      placeholder: '請輸入訂單號',
      clearable: true,
      style: {
        width: '200px'
      }
    }
  },
  {
    key: 'state',
    label: '狀態(tài)',
    type: 'select',
    props: {
      placeholder: '請選擇狀態(tài)',
      clearable: true,
      options: options.value,
      style: {
        width: '200px'
      }
    }
  }
])
function handleSubmit(value: ObjAny) {
  console.log(value)
}
onMounted(() => {
 // 模擬網(wǎng)絡請求數(shù)據(jù)
  options.value = [
    {
      value: '1',
      label: 'Option1'
    },
    {
      value: '2',
      label: 'Option2'
    },
    {
      value: '3',
      label: 'Option3'
    }
  ]
})
</script>

使用slot自定義事件

<FormRender ref="formRenderRef" v-model='data' :schema="schema">
  <template v-slot:handle="{ data }">
    <el-form-item>
      <el-button type="primary" @click="handleSubmit(data)">查詢</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </template>
</FormRender>
<script lang="ts" setup>
import FormRender from './FormRender.vue'
import {ElInput} from 'element-plus'
import {ref, onMounted, computed} from 'vue'
import {ObjAny, SchemaItem} from 'type/index.ts'
const formRenderRef = useTemplateRef('formRenderRef')
const data = ref({
  content: '張三',
  orderNo: '20250012',
  state: ''
})
const options = ref<{ label: string; value: string }[]>([])
// 默寫數(shù)據(jù)需要通過網(wǎng)絡請求獲取，所有需要使用到 computed
// 當使用v-model時, defaultValue值將失效
const schema = computed<SchemaItem[]>(() => [
  {
    key: 'content',
    label: '名稱',
    type: 'input',
    props: {
      placeholder: '請輸入名稱',
      clearable: true,
      style: {
        width: '200px'
      }
    }
  },
  {
    key: 'orderNo',
    label: '訂單號',
    component: ElInput,
    props: {
      placeholder: '請輸入訂單號',
      clearable: true,
      style: {
        width: '200px'
      }
    }
  },
  {
    key: 'state',
    label: '狀態(tài)',
    type: 'select',
    props: {
      placeholder: '請選擇狀態(tài)',
      clearable: true,
      options: options.value,
      style: {
        width: '200px'
      }
    }
  }
])
function handleSubmit(value: ObjAny) {
  console.log(value)
}
const handleReset = () => {
  formRenderRef.value?.reset()
}
onMounted(() => {
 // 模擬網(wǎng)絡請求數(shù)據(jù)
  options.value = [
    {
      value: '1',
      label: 'Option1'
    },
    {
      value: '2',
      label: 'Option2'
    },
    {
      value: '3',
      label: 'Option3'
    }
  ]
})
</script>

到此這篇關于Vue3 如何通過json配置生成查詢表單的文章就介紹到這了,更多相關vue json查詢表單內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: