问题:例如有很多form表单的话一个一个写尤为麻烦,所以想简写
解决:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<template v-for="item in formItems">
<el-form-item v-if="item.type==='input'" :label="item.label" :prop="item.prop">
<el-input v-model="ruleForm[item.prop]"></el-input>
</el-form-item>
<el-form-item v-else-if="item.type==='select'" :label="item.label" :prop="item.prop">
<el-select v-model="ruleForm[item.prop]" :placeholder="item.label">
<el-option
v-for="itemOption in selectOptions[item.options]"
:key="itemOption.value"
:label="itemOption.label"
:value="itemOption.value">
</el-option>
</el-select>
</el-form-item>
</template>
</el-form>
data () {
return {
selectOptions:{
areaOptions:[]
},
ruleForm:{
name:'',
region:''
},
selectOptions:[],
formItems:[
{
label: '活动名称',
type: 'input',
value:'name'
},{
label: '活动区域',
type: 'select',
value:'name',
options:'areaOptions'
}
],
rules: {}
}
},
methods: {
// type your function
getOptions(){
this.selectOptions.areaOptions = [{
lavel: '选项一',
value:'选项一'
}]
}
},
mounted () {
this.getOptions()
},
开始遇到的问题是,select框下拉选择项一般都是异步请求所得,如果把select的options配置为空数组,塞值的话并不方便,后来想了把options配置为对象属性值稍微简便一点,若果后期再有好的方案再做调整。