el-form表单使用

发光发热的二毛

于 2024-06-17 22:51:33 发布

阅读量155

点赞数 3

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_42702382/article/details/139756453

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、使用和可以使不同的组件分布在一行中
同时，行属性中的type="flex"和justify="space-around可以使行内元素均匀分布。或者在中使用:span=8px 控制列之间的间隔

<el-row type="flex" class="row-bg" justify="space-around">
          <el-col >
            <el-form-item label="压力模式 " :required="true">
              <el-radio v-model="dataForm.pressType" label="1"
                >RPS模式</el-radio
              >
              <!-- <el-radio-group v-model="dataForm.pressType">
          <el-radio label="1">RPS模式</el-radio>
           <el-radio label="并发模式"></el-radio> 
        </el-radio-group> -->
            </el-form-item>
          </el-col>

          <el-col >
            <el-form-item label="压测时长 " :required="true">
              <el-input
                v-model="dataForm.pressTime"
                style="width: 100px"
              ></el-input>
              分钟
            </el-form-item>
          </el-col>

          <el-col >
            <el-form-item label="递增时长 " :required="true">
              <el-input
                v-model="dataForm.increaseTime"
                style="width: 100px"
              ></el-input>
              分钟
            </el-form-item>
          </el-col>
        </el-row>

2、在中定义校验规则，:rules=“rules”
在使用:required=“true” ，标签显示必填

 <el-form
      :model="dataForm"
      :rules="rules"
      ref="dataForm"
      label-width="auto"
    >
    </el-form>
   <!--在data中添加校验规则-->
    rules: {
        taskName: [{ required: true, trigger: "blur" }],
        fileType: [{ required: true, trigger: "blur" }],
        flowModel: [{ required: true, trigger: "blur" }],
        fileType: [{ required: true, trigger: "blur" }],
        pressTime: [{ required: true, trigger: "blur" }],
        increaseTime: [{ required: true, trigger: "blur" }],
      },