zoukankan      html  css  js  c++  java
  • 使用 vue element UI 框架对form内容 rules动态验证非空

    <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible">
    <el-form
    ref="dataForm"
    :rules="rules"
    :model="dataForm"
    status-icon
    label-position="left"
    label-width="100px"
    style=" 400px; margin-left:50px;"
    >
    <el-form-item label="id" prop="id" hidden>
    <el-input v-model="dataForm.id" />
    </el-form-item>
    <el-form-item label="审核状态" prop="status" label-width="120px" >
    <el-radio v-model="dataForm.status" label="1" border @click="statusVisible = false">通过</el-radio>
    <el-radio v-model="dataForm.status" label="2" border @click="statusVisible = true">驳回</el-radio>
    </el-form-item>
    <el-form-item label="佣金比例(%)" label-width="120px" prop="commission" :rules="dataForm.status!=2?rules.commission:[{ required: false, message: '请填写团长佣金比例(%)', trigger: 'blur' }]" >
    <el-input v-model="dataForm.commission" />
    </el-form-item>
    <div :visible.sync="statusVisible">
    <el-form-item label="备注说明" label-width="120px" prop="remarks" :rules="dataForm.status!=2?rules.remarks:[{ required: true, message: '请填写驳回原因', trigger: 'blur' }]" >
    <el-input v-model="dataForm.remarks" type="textarea" />
    </el-form-item>
    </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取消</el-button>
    <el-button :loading="submiting" type="primary" @click="applySubmit">确定</el-button>
    </div>
    </el-dialog>
    rules: {
    status: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
    remarks: [{ required: false, message: '请填写驳回原因', trigger: 'blur' }],
    commission: [{ required: true, message: '请填写团长佣金比例(%)', trigger: 'blur' }]
    }
    上述代码为核心实现区域;

    下面是效果图;核心控制在于


    <el-form-item label="佣金比例(%)" label-width="120px" prop="commission" :rules="dataForm.status!=2?rules.commission:[{ required: false, message: '请填写团长佣金比例(%)', trigger: 'blur' }]" >
    <el-input v-model="dataForm.commission" />
    </el-form-item>
    <div :visible.sync="statusVisible">
    <el-form-item label="备注说明" label-width="120px" prop="remarks" :rules="dataForm.status!=2?rules.remarks:[{ required: true, message: '请填写驳回原因', trigger: 'blur' }]" >
    <el-input v-model="dataForm.remarks" type="textarea" />
    </el-form-item>
    </div>

    rules: {undefined
    status: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
    remarks: [{ required: false, message: '请填写驳回原因', trigger: 'blur' }],
    commission: [{ required: true, message: '请填写团长佣金比例(%)', trigger: 'blur' }]
    }

     


    ————————————————
    版权声明:本文为CSDN博主「法法-發發發」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/xingfaup/article/details/110912564

  • 相关阅读:
    jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
    jQuery 源码解析(二十三) DOM操作模块 替换元素 详解
    jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
    jQuery 源码分析(二十一) DOM操作模块 删除元素 详解
    jQuery 源码分析(二十) DOM操作模块 插入元素 详解
    jQuery 源码分析(十九) DOM遍历模块详解
    python 简单工厂模式
    python 爬虫-协程 采集博客园
    vue 自定义image组件
    微信小程序 image组件坑
  • 原文地址:https://www.cnblogs.com/javalinux/p/15619584.html
Copyright © 2011-2022 走看看