热门标签
热门文章
- 1MySQL大表删除解决方案_mysql删除表
- 2commit报错——husky ＞ commit-msg hook failed (add --no-verify to bypass)_husky > commit-msg hook failed (add --no-verify to
- 3使用conda虚拟环境，Jupyter Notebook 链接不上 kernel_jupyter 连不上新内核
- 4判断OBject对象为空(包括null ,““)的方法_判断object为空
- 5问卷星全自动填写脚本浅尝_问卷星自动填写
- 6YOLOv8优化策略：下采样涨点篇 |引入YOLOv9的下采样ADown_yolov8下采样
- 7部署Node.js项目（CentOS）
- 8uniapp的uni-im 即时通信使用教程【用户与商家对话、聊天 / 最新 / 最全 / 带源码 / 教程】
- 9在hdfs中创建用户目录_分布式文件系统HDFS——基础篇
- 10CycleGAN（Cycle-Consistent Generative Adversarial Network）_cyclegan 变种
当前位置: article > 正文
vue动态表单添加表单验证_vue动态新增表格验证
作者：羊村懒王 | 2024-04-17 04:28:25
赞
踩
vue动态新增表格验证
<el-form ref="conditionListForm" :rules="ConditionListRules" :model="scope.row.conditionListForm"> <el-table ref="conditionListDia" :data="scope.row.conditionListForm.conditionListDia" border :header-cell-style="background" style="width: 100%" size="mini" > <el-table-column label="限制条件名称" align="center"> <el-table-column label="条件组合" align="center" size="mini" min-width="40" > <template slot-scope="scopeChild"> <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionRelation' " :rules="ConditionListRules.conditionRelation"> <el-select v-model="scopeChild.row.conditionRelation" :disabled="scope.row.conditionListForm.conditionListDia.length > 1 || scope.row.id > 0" size="mini" placeholder="请选择" clearable style="float:left;width:95%" @change="showconditionRelation(scopeChild.row.conditionRelation)" > <el-option v-for="item in compositionConditionList" :key="item.key" :disabled="item.baseDataStatus==='0'" :label="item.label" :value="item.key" /> </el-select> </el-form-item> </template> </el-table-column> <el-table-column label="条件分组" size="mini" align="center" min-width="30" > <template slot-scope="scopeChild"> <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].medalConditionClassname' " :rules="ConditionListRules.medalConditionClassname"> <el-select v-model="scopeChild.row.medalConditionClassname" :disabled="scope.row.id > 0" size="mini" placeholder="请选择" clearable style="float:left;width:95%" @change="defDataClick(scopeChild)" > <el-option v-for="item in fatherNameList" :key="item.id" :label="item.medalConditionClassname" :value="item.id" /> </el-select> </el-form-item> </template> </el-table-column> <el-table-column label="条件" size="mini" align="center" min-width="40" > <template slot-scope="scopeChild"> <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionId' " :rules="ConditionListRules.conditionId"> <el-select v-model="scopeChild.row.conditionId" size="mini" :disabled="scope.row.id > 0" placeholder="请选择" clearable style="float:left;width:95%" @change="getRelationship(scopeChild.row.conditionId,scopeChild.row.medalConditionClassnameList,scopeChild.row)" > <el-option v-for="item in scopeChild.row.medalConditionClassnameList" :key="item.defId" :label="item.medalConditionName" :value="item.defId" /> </el-select> </el-form-item> </template> </el-table-column> </el-table-column> <el-table-column label="运算关系" align="center" size="mini" min-width="50" > <template slot-scope="scopeChild"> <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionOperation' " :rules="ConditionListRules.conditionOperation"> <el-select v-model="scopeChild.row.conditionOperation" size="mini" placeholder="请选择" :disabled="scope.row.id > 0" clearable style="float:left;width:95%" @change="conditionOperationEmpty(scopeChild.row)" > <el-option v-for="item in scopeChild.row.conditionOperationValueList" :key="item.key" :disabled="item.baseDataStatus==='0'" :label="item.value" :value="item.key" /> </el-select> </el-form-item> </template> </el-table-column> <el-table-column label="值" align="center" size="mini" min-width="120" > <template slot-scope="scopeChild"> <el-form-item v-if="scopeChild.row.medalConditionControlType === '0'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList"> <el-select v-model="scopeChild.row.conditionTrueValueList" multiple style="float:left;width:95%" size="mini" clearable placeholder="请选择" @change="conditionValueEmpty(scopeChild)" > <el-option v-for="item in scopeChild.row.conditionValueList" :key="item.value" :label="item.key" :value="item.value" /> </el-select> </el-form-item> <el-form-item v-if="scopeChild.row.medalConditionControlType == '1'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue"> <el-input v-model="scopeChild.row.conditionValue" clearable placeholder="请输入" align="center" style="float:left;" size="mini" maxlength="60" show-word-limit @blur="conditionValueEmpty(scopeChild)" /> </el-form-item> <el-form-item v-if="scopeChild.row.medalConditionControlType == '2'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList"> <el-date-picker v-model="scopeChild.row.conditionTrueValueList" type="daterange" range-separator="至" start-placeholder="开始日期" size="mini" end-placeholder="结束日期" style="float:left;width:95%" /> </el-form-item> <el-form-item v-if="scopeChild.row.medalConditionControlType === '3'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue"> <el-select v-model="scopeChild.row.conditionValue" style="float:left;width:95%" size="mini" clearable placeholder="请选择" @change="conditionValueEmpty(scopeChild)" > <el-option v-for="item in scopeChild.row.conditionValueList" :key="item.value" :label="item.key" :value="item.value" /> </el-select> </el-form-item> <el-form-item v-if="scopeChild.row.medalConditionControlType === '4'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList"> <el-time-picker v-model="scopeChild.row.conditionTrueValueList" style="float:left;width:95%" size="mini" is-range clearable range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm" @change="conditionValueEmpty(scopeChild)" /> </el-form-item> <el-form-item v-if="scopeChild.row.medalConditionControlType == '5'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue"> <el-input-number v-model="scopeChild.row.conditionValue" size="mini" :min="0" label="" @change="conditionValueEmpty(scope)" /> </el-form-item> </template> </el-table-column> <el-table-column label="操作" align="center" min-width="50" > <template slot-scope="scopeChild"> <el-button type="text" :disabled="scope.row.id > 0" @click="delCondition(scope.$index,scope.row.conditionListForm.conditionListDia,scopeChild.row,scopeChild.$index)">删除</el-button> </template> </el-table-column> </el-table> </el-form> ConditionListRules: { conditionRelation: [ { required: true, message: '条件组合不能为空', trigger: 'change' } ], medalConditionClassname: [ { required: true, message: '条件分组不能为空', trigger: 'change' } ], conditionId: [ { required: true, message: '条件不能为空', trigger: 'change' } ], conditionOperation: [ { required: true, message: '运算关系不能为空', trigger: 'change' } ], conditionValue: [ { required: true, message: '值不能为空', trigger: 'change' } ], conditionTrueValueList: [ { required: true, message: '值不能为空', trigger: 'change' } ] },
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
主要就是prop的问题，prop要对应到数据。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/438210
推荐阅读
相关标签
