vue+element 判断table表格输入不能为空
点击确定的时候,判断表格其中某行某值不能为空
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+'行:属性值不能为空') }
效果图:
无论风雨,和自己一决胜负吧
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律