zoukankan      html  css  js  c++  java
  • 表单组件里面放其他组件的方法

    <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=" 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=" 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>
  • 相关阅读:
    文件上传
    gitee 提交项目
    SSM分页查询功能
    SSM 管理员删除功能
    SSM整合 管理员登录功能(密码加密功能)
    SSM整合项目 MD5加密工具类
    SSM Ajax发送复杂对象
    SSM环境中 Ajax 发送简单数组的三种方法
    ssm 增删改查
    ssm 登录功能
  • 原文地址:https://www.cnblogs.com/kaibindirver/p/14137944.html
Copyright © 2011-2022 走看看