• vue+elementui表单数组对象深层嵌套之自定义验证规则


    需求场景:在Vue+Elementui项目中,需要在表单的循环数组中,对某一深层嵌套的对象属性制定自定义校验规则。

    1. <template>
    2. <div>
    3. <el-form :model="form" ref="form" label-width="110px">
    4. <div v-for="(item,index) in form.list" :key="index">
    5. <el-col :xs="24"
    6. :sm="24"
    7. :md="12"
    8. :lg="4">
    9. <el-form-item label="默认值" :prop="`list.${index}.state`" :rules="{ required:true, validator: validateState, trigger: 'blur', index:index }">
    10. <el-input v-model.number="item.state"></el-input>
    11. </el-form-item>
    12. </el-col>
    13. <el-col :xs="24"
    14. :sm="24"
    15. :md="11"
    16. :lg="5">
    17. <el-form-item label="是否可调">
    18. <el-switch active-text="是" inactive-text="否" v- model="item.adjust.isAdjust">
    19. </el-switch>
    20. </el-form-item>
    21. </el-col>
    22. <el-col :xs="24"
    23. :sm="24"
    24. :md="12"
    25. :lg="8"
    26. v-show="item.adjust.isAdjust">
    27. <el-form-item label="范围调节" required>
    28. <el-col :span="11">
    29. <el-form-item :prop="`list.${index}.adjust.min`" :rules="{ required:true, validator: validateMin, trigger: 'blur', index:index }">
    30. <el-input v-model.number="item.adjust.min"
    31. placeholder="最小值">
    32. </el-input>
    33. </el-form-item>
    34. </el-col>
    35. <el-col :span="1">
    36. <div style="text-align:center;"></div>
    37. </el-col>
    38. <el-col :span="11">
    39. <el-form-item :prop="`list.${index}.adjust.max`" :rules="{ required:true, validator: validateMax, trigger: 'blur', index:index }">
    40. <el-input v-model.number="item.adjust.max"
    41. placeholder="最大值">
    42. </el-input>
    43. </el-form-item>
    44. </el-col>
    45. </el-form-item>
    46. </el-col>
    47. </div>
    48. </el-form>
    49. </div>
    50. </template>
    51. <script>
    52. export default{
    53. data(){
    54. return{
    55. // 此处略过。。。挪用上文
    56. }
    57. },
    58. methods:{
    59. isEmpty(arg) {
    60. if(typeof arg === 'undefined' || arg === null || arg === ''){
    61. return true
    62. }
    63. return false
    64. },
    65. validateState(rule,value,callback){
    66. let min = this.form.list[rule.index].adjust.min
    67. let max = this.form.list[rule.index].adjust.max
    68. if(this.isEmpty(value)) {
    69. return callback(new Error('参数不得为空')))
    70. }
    71. if(!this.isEmpty(min) && !this.isEmpty(max) && parseInt(value) <
    72. parseInt(min)) {
    73. return callback(new Error('不得小于最小值')))
    74. }
    75. if(!this.isEmpty(min) && !this.isEmpty(max) && parseInt(value) > parseInt(max)) {
    76. return callback(new Error('不得大于最大值'))
    77. }
    78. return callback()
    79. },
    80. }
    81. }
    82. </script>

  • 相关阅读:
    HTTPS内容详解(图解HTTP协议)
    Webpack 4
    细胞膜包裹精氨酸脱亚胺酶脂质纳米粒/融合细胞膜包裹尿酸酶/过氧化氢酶脂质纳米粒的研究
    HUAWEI华为MateBook X Pro 2021款 i7 集显(MACHD-WFE9Q)原装出厂Win10系统20H2
    静态代理与动态代理
    HTTP 常⻅的状态码有哪些,以及适⽤场景
    MySQL数据库约束与表的设计
    【C++】异常处理(一)
    如何看待越来越多人报名参加软考?
    几道单调队列相关的题目
  • 原文地址:https://blog.csdn.net/lw_1220/article/details/134196496