vue+element 判斷table表格輸入不能為空
阿新 • • 發佈:2022-12-05
點選確定的時候,判斷表格其中某行某值不能為空
1、HTML
<div class="app-container"> <el-form ref="form" :model="bankRuleForm"> <el-row> <el-col :span="24"> <el-table :data="bankRuleForm.bankRuleList"> <el-table-column label="類別" align="center" :formatter="questionTypeFormat" prop="questionType" /> <el-table-column label="數量" prop="quantity"> <template slot-scope="scope"> <el-input-number controls-position="right" :min="0" :max="30" v-model="scope.row.quantity" clearble/> </template> </el-table-column> <el-table-column label="分值" prop="score"> <template slot-scope="scope"> <el-input-number controls-position="right" :min="0" :max="10" v-model="scope.row.score" clearble/> </template> </el-table-column> </el-table> </el-col> </el-row> </el-form> <div class="dialog-footer" style="float:right;margin-top: 10px;"> <el-button :loading="buttonLoading" type="primary" @click="submitForm('submit')">儲存</el-button> <el-button @click="cancel">取 消</el-button> </div> </div>
2、JS
// 驗證屬性列表 verifyTable() { var result = true var message = [] this.bankRuleForm.bankRuleList.forEach((item,index) => { let no = index + 1 if (item.quantity === undefined) { result = result && false message.push('第'+no+'行:數量不能為空!') } if (item.score === undefined) { result = result && false message.push('第'+no+'行:分值不能為空!') } }) if (!result) { var temp = ''; message.forEach(v => { temp += `<li>${v}</li>`; }) return this.$notify({ title: '屬性列表提示', dangerouslyUseHTMLString: true, type: 'warning', duration:2000, message: `<ul>${temp}</ul>` }); } },
判斷字串或文字型別不為空
if (item.name == '') {
result = result && false
message.push('第'+no+'行:屬性名稱不能為空')
}
// 判斷文字
if (item.type !== 'input' && item.default == '') {
result = result && false
message.push('第'+no+'行:屬性值不能為空')
}
效果圖: