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>
相关推荐
崔璨5 分钟前
实现一个精简React -- 性能优化,减少不必要的计算(8)
前端·react.js
机构师8 分钟前
<rust><tauri><GUI>基于tauri,打开任意windows电脑应用程序
javascript·rust
hrrrrb9 分钟前
【CSS3】金丹篇
前端·css·css3
小王不会写code13 分钟前
VNode
javascript
IT、木易14 分钟前
大白话如何利用 CSS 实现一个三角形?原理是什么?
前端·css
cong_14 分钟前
为了摸鱼我开发了一个摸鱼网站
前端·后端·github
菲力蒲LY20 分钟前
固定表头、首列 —— uniapp、vue 项目
前端·vue.js·uni-app
roamingcode27 分钟前
AI Agent开发框架分析:前端视角
前端·人工智能·ai agent
LaughingZhu30 分钟前
PH热榜 | 2025-03-10
前端·人工智能·经验分享·搜索引擎·产品运营
没资格抱怨31 分钟前
基于类型的声明接收props
前端·vue.js