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+'行:属性值不能为空')
}
效果图:
无论风雨,和自己一决胜负吧