vue3二次封装element-puls

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

如: 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:"请输入用户名称"

}

]

}

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

<template><el-form style="max-width: 600px"><template v-for="(item, index) in formConfig.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-optionv-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>
import { reactive } from "vue";//    定义表单的配置项
const formConfig = {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: "下拉框1",placeholder: "请选择内容",options: [{label: "禁用",value: 0,},{label: "启用",value: 1,},],},],
};
</script>
<style lang="scss" scoped></style>