竞价网站做不做链接,国外直播,企业商场网站建设,wordpress程序伪静态将表单的通用信息给设置出来
如: label 的提示信息 , type 的类型
// 定义表单的配置项
const formConfig{
formItems:[
{
type:input,
label:用户ID,
placeholder:请输入用户ID }
]
} 页面配置如
template v-for(it…将表单的通用信息给设置出来
如: label 的提示信息 , type 的类型
// 定义表单的配置项
const formConfig{
formItems:[
{
type:input,
label:用户ID,
placeholder:请输入用户ID }
]
} 页面配置如
template v-for(item,index) in formConfig.formItems :keyindex
el-form-item :labelitem.label
el-input :placeholderitem.placeholder /
/el-form-item
/template 如果定义// 定义表单的配置项
const formConfig{
formItems:[
{
type:input,
label:用户ID,
placeholder:请输入用户ID },
{
type:input,
label:用户名称,
placeholder:请输入用户名称 }
]
}
页面就会出现两个一样的输入框并且里面的渲染不同
templateel-form stylemax-width: 600pxtemplate v-for(item, index) in formConfig.formItems :keyindexel-form-item :labelitem.label!-- v-ifitem.type input 根据类型判断是下拉框还是输入框 --!-- 输入框 --template v-ifitem.type inputel-input :placeholderitem.placeholder //template!-- 下拉框 --template v-else-ifitem.type selectel-select :placeholderitem.placeholderel-optionv-foroption in item.options:keyoption.value:labeloption.label:valueoption.value//el-select/template/el-form-item/template/el-form
/template
script langts 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 langscss scoped/style
