vue3中element-push表单的封装和复用

<!--

将表单的通用信息给设置出来

如: label 的提示信息 , type 的类型

// 定义表单的配置项

const formConfig={

formItems:[

{

type:"input",

label:"用户ID",

placeholder:"请输入用户ID"

}

]

}

页面配置如

<template v-for="(item,index) in formConfig.formItems" :key="index">

<el-form-item :label="item.label">

<el-input :placeholder="item.placeholder" />

</el-form-item>

</template>

 

如果定义// 定义表单的配置项

const formConfig={

formItems:[

{

type:"input",

label:"用户ID",

placeholder:"请输入用户ID"

},

{

type:"input",

label:"用户名称",

placeholder:"请输入用户名称"

}

]

}

页面就会出现两个一样的输入框，并且里面的渲染不同

然后使用

使用v-bind将配置项传递给表单组件

<myFrom v-bind="formConfig"></myFrom> 或<myFrom v-bind="commonFro"></myFrom>

在封装的表格页面使用

// 接收父传过来的数据

// defineProps接收父传子的生命周期函数，返回父组件的props对象

import { defineProps } from 'vue';

const props = defineProps({

formItems:{

type:Array

},

})

-->

app.vue（主要页面）

<script setup lang="ts">
</script>

<template>
  <router-link to="/home">页面1</router-link>
  <div class="qq"></div>
  <router-link to="/common-form">页面2</router-link>
  <router-view></router-view>
</template>

<style scoped>
.qq{
  margin-left: 100rpx;
}
</style>

myFrom.vue(封装的可复用弹窗的页面)

<template>
    <el-form style="max-width: 600px">
      <template v-for="(item,index) in formItems" :key="index">
        <el-form-item :label="item.label">
          <!-- v-if="item.type === 'input'" 根据类型判断是下拉框还是输入框  -->
  
          <!-- 输入框 -->
          <template v-if="item.type === 'input'">
            <el-input :placeholder="item.placeholder" />
          </template>
   
          <!-- 下拉框 -->
          <template v-else-if="item.type === 'select'">
            <el-select :placeholder="item.placeholder">
              <el-option
                v-for="option in item.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </template>
        </el-form-item>
      </template>
    </el-form>
  </template>
<script lang='ts' setup>

// 接收父传过来的数据
// defineProps接收父传子的生命周期函数，返回父组件的props对象
import { defineProps } from 'vue';

const props = defineProps({
    
    formItems:{
        type:Array
    },
    
})

</script>
<style lang='scss' scoped>

</style>

home.vue(第一个复用弹窗的页面)

<template>
    <!-- 使用v-bind将配置项传递给表单组件 -->
     <!-- v-bind 具有动态绑定数据的意思  -->
    <myFrom v-bind="formConfig"></myFrom>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import myFrom from "./myForm.vue";  //复用封装的表单


//    定义表单的配置项
const formConfig =ref({
  formItems: [
    { 
      type: "input",
      label: "用户ID",
      placeholder: "请输入用户ID",
    },
    {
      type: "select",
      label: "下拉框1",
      placeholder: "请选择内容",
      options: [
        {
          label: "禁用",
          value: 0,
        },
        {
          label: "启用",
          value: 1,
        },
      ],
    },
    {
      type: "input",
      label: "用户名称",
      placeholder: "请输入用户名称",
    },
    {
      type: "select",
      label: "下拉框2",
      placeholder: "请选择内容2",
      options: [
        {
          label: "禁用2",
          value: 0,
        },
        {
          label: "启用2",
          value: 1,
        },
      ],
    },
  ],
});
</script>
<style lang="scss" scoped></style>

commonForm.vue(第二个复用表单的页面)

<template>
  <!-- 使用v-bind将配置项传递给表单组件 -->
   <!-- v-bind 具有动态绑定数据的意思  -->
  <myFrom v-bind="commonFro"></myFrom>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import myFrom from "./myForm.vue";  //复用封装的表单


//    定义表单的配置项
const commonFro =ref({
  formItems: [
  { 
    type: "input",
    label: "用户的下表",
    placeholder: "请输入用户下标",
  },
  {
    type: "select",
    label: "第2个下拉框",
    placeholder: "第2个请选择内容",
    options: [
      {
        label: "第2个禁用",
        value: 0,
      },
      {
        label: "第2个启用",
        value: 1,
      },
    ],
  },
  {
    type: "input",
    label: "第2个用户名称",
    placeholder: "第2个请输入用户名称",
  },
  {
    type: "select",
    label: "第2个下拉框2",
    placeholder: "第2个请选择内容2",
    options: [
      {
        label: "第2个禁用2",
        value: 0,
      },
      {
        label: "第2个启用2",
        value: 1,
      },
    ],
  },
],
});
</script>
<style lang="scss" scoped></style>