Vue3动态表单实现

实现方法:通过<component />标签动实现动态表单渲染

component标签:

在vue中 component 标签用于动态组件标签的渲染。它允许在同一个挂载点上条件渲染不同的组件,通过is属性可以渲染指定的属性

在上面的例子中,通过调用函数applyCom实现在页面上渲染Com2组件

动态表单渲染(Vue3 + ElementPlus)

* 文件列表

* widgets/index.js

在index.js中导入所有的表单元素组件

export { default as WidgetInput } from "./input.vue";

export { default as WidgetTextarea } from "./textarea.vue";

export { default as WidgetSelect } from "./select.vue";

export { default as WidgetRadio } from "./radio.vue";

export { default as WidgetUpdate } from "./upload.vue";

* widgets/input.vue

<template>
  <div>
    <el-input v-model="model" style="width: 240px" v-bind="$attrs"  />
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
    modelValue:{
        type:Number
    }
})

const emits = defineEmits(['update:modelValue']);

const model = useVModel(props,'modelValue',emits);
</script>
  1. 通过v-model确保数据的单向流

  2. $attrs: 当想要将所有未声明的属性都是用在组件上可以使用,那么这里就会将component组件上的绑定的v-bind的数据全部应用到input这个组件之上。

* form.vue

<template>
  <ElForm ref="formRef" labelPosition="top" @submit.prevent>
    <ElFormItem v-for="(item, index) in arr" :key="index">
      <component
        :is="getWidgetByName(item.name)"
        v-model="item.value"
        v-bind="item.apply"
      />
    </ElFormItem>
  </ElForm>
</template>
<script setup>
import * as widgets from "./widgets";

let arr = [
  {
    name: "WidgetInput",
    value: 1,
    apply: {
      placeholder: "请输入数字",
    },
  },
  {
    name: "WidgetInput",
    value: 2,
    apply: {
      placeholder: "请输入数字",
    },
  },

  {
    name: "WidgetSelect",
    value: 3,
    apply: {
      placeholder: "请输入数字",
    },
  },
];
const getWidgetByName = (name) => {
  return widgets[name];
};
</script>
相关推荐
梦屿千寻!!几秒前
Axios和Ajax的区别
前端
iOS开发的小学生4 分钟前
鸿蒙app封装 axios post请求失败问题
前端·harmonyos·鸿蒙开发
我码玄黄20 分钟前
在THREEJS中加载3dtile模型
前端·javascript·3d·threejs
文浩(楠搏万)34 分钟前
Java Spring Boot 项目中嵌入前端静态资源:完整教程与实战案例
java·服务器·前端·spring boot·后端·nginx·github
悠悠华36 分钟前
使用layui的table提示Could not parse as expression(踩坑记录)
前端·javascript·layui
谎言西西里42 分钟前
JavaScript类型转换(下):掌握 Object 类型 与 隐性 的转换逻辑😎
javascript
东离与糖宝1 小时前
webScoke api 介绍
前端
群联云防护小杜1 小时前
黑客如何找到App中的源IP:原理与防范
运维·服务器·前端·网络·网络协议·tcp/ip
Αиcíеиτеǎг2 小时前
基于前端技术UniApp和后端技术Node.js的电影购票系统
前端·uni-app·node.js
licy__2 小时前
Vue 3 中页面跳转方式的详细介绍
前端·javascript·vue.js