快捷复制 - element 表单 & 表格

<el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
        label-position="left"
        label-width="120px"
      >
        <!-- 下拉 -->
       <el-form-item label="核酸结果">
          <el-select
            clearable
            v-model="formInline.testResult"
            placeholder="请选择"
          >
            <el-option label="阳性" :value="0"></el-option>
            <el-option label="阴性" :value="1"></el-option>
          </el-select>
        </el-form-item>
        
        <!-- 输入框 -->
        <el-form-item label="身份证号">
          <el-input v-model="formInline.cardNo" placeholder="请输入"></el-input>
        </el-form-item>

        <!-- 时间段 -->
        <el-form-item label="核酸检测时间">
          <el-date-picker
            v-model="jcStart_jcEnd"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="jcTime"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 三级下拉 -->
       <el-form-item label="上级菜单" prop="fcdxh">
         <el-cascader
          :options="tableData"
          placeholder="请输入您要查找的菜单"
          v-model="form.fcdxh"
          :filterable="true"
          :props="{
            checkStrictly: true,
            expandTrigger: 'hover',
            children: 'children',
            label: 'title',
            value: 'key'
          }"
          clearable
        ></el-cascader>
      </el-form-item>

      <!-- 多个单选框 -->
      <el-form-item label="总办" class="sitelegend">
        <el-checkbox-group v-model="form.b">
          <div class="sitelegenditem fl">
            <el-checkbox label="0"> 哈哈</el-checkbox>
          </div>
        </el-checkbox-group>
      </el-form-item>


</el-form>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您使用的是 element-plus 的表格表单组件,并且需要进行校验,可以使用其提供的校验规则和自定义校验方法。 对于表格组件,您可以在列定义中添加 `rules` 属性来设置校验规则,例如: ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"></el-table-column> <el-table-column prop="age" label="年龄" :rules="[{ required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值' }]"></el-table-column> </el-table> ``` 在上述示例中,我们为姓名和年龄两列设置了校验规则,其中 `required` 表示必填,`type` 表示输入类型。当表格中的数据被修改时,如果不符合校验规则,将会弹出相应的提示信息。 对于表单组件,您可以使用 `el-form` 组件中的 `rules` 属性来设置校验规则,例如: ```html <el-form :model="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` 在上述示例中,我们设置了一个 `form` 对象来存储表单数据,并为姓名和年龄两个字段设置了校验规则。当用户提交表单时,如果不符合校验规则,将会弹出相应的提示信息。 您还可以使用自定义校验方法来实现更复杂的校验逻辑,例如: ```html <el-form :model="form" :rules="rules"> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" type="password"></el-input> </el-form-item> <el-form-item label="确认密码" prop="password2"> <el-input v-model="form.password2" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` ```js data() { return { form: { password: '', password2: '' }, rules: { password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { validator: this.validatePassword, trigger: 'blur' } ], password2: [ { required: true, message: '请再次输入密码', trigger: 'blur' }, { validator: this.validatePassword2, trigger: 'blur' } ] } } }, methods: { validatePassword(rule, value, callback) { if (value.length < 6 || value.length > 16) { callback(new Error('密码长度应为6-16位')) } else { callback() } }, validatePassword2(rule, value, callback) { if (value !== this.form.password) { callback(new Error('两次输入的密码不一致')) } else { callback() } }, submitForm() { this.$refs.form.validate(valid => { if (valid) { // 校验通过,提交表单 } else { // 校验不通过,弹出提示信息 } }) } } ``` 在上述示例中,我们为密码和确认密码两个字段设置了自定义校验方法 `validatePassword` 和 `validatePassword2`,用于检查密码长度和两次输入的密码是否一致。在提交表单时,我们调用 `$refs.form.validate` 方法来进行校验,并根据校验结果来决定是否提交表单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值