vue配置多个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()
    },