点击确定的时候,判断表格其中某行某值不能为空

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

效果图:

vue+element 判断table表格输入不能为空的更多相关文章

  1. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  2. vue + element ui table表格二次封装 常用功能

    因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...

  3. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  4. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  5. vue+element对常用表格的简单封装

    在后台管理和中台项目中, table是使用率是特别的高的, 虽然element已经有table组件, 但是分页和其他各项操作还是要写一堆的代码, 所以就在原有的基础上做了进一步的封装 所涵盖的功能有: ...

  6. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  7. element ui table 表格排序

    实现elementui表格的排序 1:给table加上sort-change,给table每一项加上sortable和column-key,排序是根据column-key来进行排序的 <el-t ...

  8. vue element ui table 自动无限滚动组件

    <template>   <el-table     class="tableList"     ref="rw_table"     hei ...

  9. Vue+element UI实现表格数据导出Excel组件

    介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...

  10. vue element UI el-table 表格调整行高的处理方法

    这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...

随机推荐

  1. ASTAR机台(win7 p'rofessional)使用python tool中文显示异常问题解决

    1.双击"computer"打开界面如下,再单击"open control panel"打开控制面板. 2.在控制面板中点击"Clock,Langua ...

  2. 3385. 【NOIP2013模拟】黑魔法师之门

    3385. [NOIP2013模拟]黑魔法师之门 题目大意: 做法: 代码: 题目大意: 给你一个无向无权图,每次询问加入一条边问你图中每个点的度数大于零且都是偶数的子图的个数对1000000009取 ...

  3. [C++基础入门] 7、 指针

    文章目录 7 指针 7.1 指针的基本概念 7.2 指针变量的定义和使用 7.3 指针所占内存空间 7.4 空指针和野指针 7.5 const修饰指针 7.6 指针和数组 7.7 指针和函数 7.8 ...

  4. 聊一聊 Valgrind 监视非托管内存泄露和崩溃

    一:背景 1. 讲故事 只要是程序总会出现各种莫名其妙的问题,比如:非托管内存泄露,程序崩溃,在 Windows 平台上一般用微软自家的官方工具 App Verifier 就可以洞察,那问题出在 Li ...

  5. 通过空间占用和执行计划了解SQL Server的行存储索引

    1 索引介绍 索引是一种帮助查询语句能够快速定位到数据的一种技术.索引的存储方式有行存储索引.列存储索引和内存优化三种存储方式: 行存储索引,使用B+树结构,行存储指的是数据存储格式为堆.聚集索引和内 ...

  6. 2021-08-29:N * M的棋盘(N和M是输入参数),每种颜色的格子数必须相同的,上下左右的格子算相邻,相邻格子染的颜色必须不同,所有格子必须染色,返回至少多少种颜色可以完成任务。 福大大 答

    2021-08-29:N * M的棋盘(N和M是输入参数),每种颜色的格子数必须相同的,上下左右的格子算相邻,相邻格子染的颜色必须不同,所有格子必须染色,返回至少多少种颜色可以完成任务. 福大大 答案 ...

  7. 回溯理论基础及leetcode例题

    学习参考 回溯 与递归相辅相成;回溯是递归的副产品,只要有递归就会有回溯. 回溯函数也就是递归函数,指的都是一个函数. 回溯搜索法 纯暴力搜索 解决的问题 组合问题:N个数里面按一定规则找出k个数的集 ...

  8. 安装Visio 2016与原本的office冲突的最终解决方案

    一. 下载office visio 2016 二. 开始安装 但是提示卸载原本的office 三. 网上找寻答案 于是按照这篇文章https://jingyan.baidu.com/article/1 ...

  9. JS加载机制

    做开发多年后发现自己思维任然只定位在功能的实现:忽略了很多代码最终的实现,加载机制等 那我们接下来就借助几篇博客来理理天天看见的js:理理他究竟是怎么过执行的 一.代码检测 首先浏览器会对所有js 进 ...

  10. vue iview 单击table行变色 获取行数据

    用到两个事件: 代码如下: 1 <Table :columns="columns" :data="tableData" @on-row-click=&qu ...