表单组件里面放其他组件的方法
<template> <a-modal class="mymodal" v-model="visible" centered title="接口信息" ok-text="确认" cancel-text="取消" @ok="handleSubmit" @cancel="closeadd" :destroyOnClose="true" > <a-form :form="form" @submit="handleSubmit"> 联系选择组件 <a-form-item v-bind="formItemLayout" label="复制接口信息"> <a-cascader :options="options" :load-data="loadData" change-on-select @change="onChange" v-decorator="['api_id']" //表单必要对应字段 /> </a-form-item> <a-form-item v-bind="formItemLayout" label="接口名称"> <a-input v-decorator="[ 'case_name', { rules: [ { required: true, message: '请输入接口名称', trigger: 'blur' }, { min: 2, max: 20, message: '字符范围在2-20个字', trigger: 'blur', }, ], }, ]" /> </a-form-item> <a-form-item v-bind="formItemLayout" label="请求方式"> <div style="margin-bottom: 16px; display: flex"> <a-select slot="addonBefore" v-decorator="['methods', { initialValue: 'get' }]" style="width: 70px" > <a-select-option value="get"> get </a-select-option> <a-select-option value="post"> post </a-select-option> <a-select-option value="delete"> delete </a-select-option> <a-select-option value="patch"> patch </a-select-option> <a-select-option value="put"> put </a-select-option> </a-select> <a-select show-search v-decorator="[ 'st_host', { rules: [{ required: true, message: '输入对应的host' }], }, ]" style="width: 100%" > <a-select-option :value="item.id" v-for="item in hosts" :key="item.id" > <a-tooltip> <template slot="title"> {{ item.host }} </template> {{ item.host.length > 30 ? `${item.host.substr(0, 30)}...` : item.host }} </a-tooltip> </a-select-option> </a-select> </div> </a-form-item> <a-form-item v-bind="formItemLayout" label="请求路径"> <a-input v-decorator="[ 're_path', { rules: [ { required: true, message: '请输入请求路径', trigger: 'blur' }, ], }, ]" /> </a-form-item> <a-form-item v-bind="formItemLayout" label="请求头"> <a-input type="textarea" :auto-size="{ minRows: 6, maxRows: 6 }" v-decorator="[ 're_head', { rules: [ { required: true, message: '请输入请求头', trigger: 'blur' }, ], }, ]" /> </a-form-item> <a-form-item v-bind="formItemLayout" label="请求体"> <a-input type="textarea" :auto-size="{ minRows: 6, maxRows: 10 }" v-decorator="['re_body']" /> </a-form-item> <a-form-item v-bind="formItemLayout" label="提取返回值"> <a-input v-decorator="[ 'need_value', { rules: [ { min: 2, max: 100, message: '字符范围在2-100', trigger: 'blur', }, ], }, ]" /> </a-form-item> <a-form-item v-bind="formItemLayout" label="断言字段"> <a-input v-decorator="[ 'asserts', { rules: [{ min: 2, max: 50, message: '字符范围在2-50个字' }], }, ]" /> </a-form-item> <a-form-item v-bind="formItemLayout" label="返回状态码"> <a-input v-decorator="[ 'st_code', { rules: [ { required: true, message: '请输入状态码', trigger: 'blur' }, { min: 2, max: 12, message: '字符范围在2-12个字', trigger: 'blur', }, ], }, ]" /> </a-form-item> </a-form> </a-modal> </template>