Vue3 如何通过json配置生成查询表单

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

本文给大家介绍Vue3如何通过json配置生成查询表单,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

功能实现背景

通过Vue3实现后台管理项目一定含有表格功能，通常离不开表单。于是通过json配置来生成表单的想法由然而生

注意：
1.项目依赖element-plus

使用规则
1. 组件支持使用v-model管理值，当v-model不配置时也可以通过@finish事件获取表单值
2. 当FormRender组件设置v-model后，schema配置项中defaultValue设置的默认值无效
3. 项目默认查询和重置事件，也支持插槽自定义事件
4. 通过插槽自定义事件时，可以通过插槽获取表单值，也可以通过组件暴露属性和方法获取el-form属性&方法和表单值

项目代码

创建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表单组件属性
}

创建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 }[]>([])
// 默写数据需要通过网络请求获取，所有需要使用到 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: '状态',
    type: 'select',
    props: {
      placeholder: '请选择状态',
      clearable: true,
      options: options.value,
      style: {
        width: '200px'
      }
    }
  }
])
function handleSubmit(value: ObjAny) {
  console.log(value)
}
onMounted(() => {
 // 模拟网络请求数据
  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 }[]>([])
// 默写数据需要通过网络请求获取，所有需要使用到 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: '状态',
    type: 'select',
    props: {
      placeholder: '请选择状态',
      clearable: true,
      options: options.value,
      style: {
        width: '200px'
      }
    }
  }
])
function handleSubmit(value: ObjAny) {
  console.log(value)
}
onMounted(() => {
 // 模拟网络请求数据
  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 }[]>([])
// 默写数据需要通过网络请求获取，所有需要使用到 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: '状态',
    type: 'select',
    props: {
      placeholder: '请选择状态',
      clearable: true,
      options: options.value,
      style: {
        width: '200px'
      }
    }
  }
])
function handleSubmit(value: ObjAny) {
  console.log(value)
}
const handleReset = () => {
  formRenderRef.value?.reset()
}
onMounted(() => {
 // 模拟网络请求数据
  options.value = [
    {
      value: '1',
      label: 'Option1'
    },
    {
      value: '2',
      label: 'Option2'
    },
    {
      value: '3',
      label: 'Option3'
    }
  ]
})
</script>

到此这篇关于Vue3 如何通过json配置生成查询表单的文章就介绍到这了,更多相关vue json查询表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue项目怎样用nginx反向代理WebSocket请求地址
这篇文章主要介绍了vue项目怎样用nginx反向代理WebSocket请求地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
vue中对象数组去重的实现
这篇文章主要介绍了vue中对象数组去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
详解vue3+quasar弹窗的几种方式
本文主要介绍了vue3+quasar弹窗的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue2如何使用vue-i18n搭建多语言切换环境
这篇文章主要介绍了vue2-使用vue-i18n搭建多语言切换环境的相关知识,在data(){}中获取的变量存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言,感兴趣的朋友一起看看吧
2023-12-12
如何处理 Vue3 中隐藏元素刷新闪烁问题
本文主要探讨了网页刷新时,原本隐藏的元素会一闪而过的问题,以及尝试过的解决方案并未奏效,通过实例代码介绍了如何处理 Vue3 中隐藏元素刷新闪烁问题,感兴趣的朋友跟随小编一起看看吧
2024-10-10
mpvue小程序循环动画开启暂停的实现方法
这篇文章主要介绍了mpvue小程序循环动画开启暂停的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue2 配置 Axios api 接口调用文件的方法
本篇文章主要介绍了Vue2 配置 Axios api 接口调用文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
vue项目多租户环境变量的设置
本文主要介绍了vue项目多租户环境变量的设置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Vue.js集成Word实现在线编辑功能
在现代Web应用中,集成文档编辑功能变得越来越常见,特别是在协作环境中,能够直接在Web应用内编辑Word文档可以极大地提高工作效率,本文将详细介绍如何在Vue.js项目中集成Word在线编辑功能,需要的朋友可以参考下
2024-08-08
前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现方法
token是一个用户信息的表示,在登录中将会从后端拿到token,然后用户才可以进行往后的一系列操作,这篇文章主要给大家介绍了关于前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现的相关资料,需要的朋友可以参考下
2024-01-01

Vue3 如何通过json配置生成查询表单

目录

功能实现背景

项目代码

案例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具