将表单的通用信息给设置出来
如: 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>