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+'行:属性值不能为空')
}

效果图:

posted @ 2022-12-05 16:26  阿尔法哲  阅读(1537)  评论(0编辑  收藏  举报