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