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+'行:属性值不能为空')
}
效果图:
vue+element 判断table表格输入不能为空的更多相关文章
- 封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
- vue + element ui table表格二次封装 常用功能
因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element对常用表格的简单封装
在后台管理和中台项目中, table是使用率是特别的高的, 虽然element已经有table组件, 但是分页和其他各项操作还是要写一堆的代码, 所以就在原有的基础上做了进一步的封装 所涵盖的功能有: ...
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- element ui table 表格排序
实现elementui表格的排序 1:给table加上sort-change,给table每一项加上sortable和column-key,排序是根据column-key来进行排序的 <el-t ...
- vue element ui table 自动无限滚动组件
<template> <el-table class="tableList" ref="rw_table" hei ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- vue element UI el-table 表格调整行高的处理方法
这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...
随机推荐
- Azure DevOps(一)基于 Net6.0 的 WPF 程序如何进行持续集成、持续编译
一,引言 我们是否正在为如何快速的编译.部署客户端应用程序而烦恼?这也是博主最近遇到的问题.目前博主所在公司主要做项目级的定制化开发,多以 C/S 架构的 WPF 程序为主,每次到了协助开发团队给实施 ...
- 谈谈selenium中的clear后输入内容异常的处理
谈谈selenium中的clear后输入内容异常的处理 案例 在线考试项目的登录:http://124.223.31.21:9097/#/ 代码 from selenium import webdri ...
- 1778D Flexible String Revisit
1778D Flexible String Revisit 目录 1778D Flexible String Revisit 题目大意: 做法: dp 注意 code 题目大意: 给你两个长度均为\( ...
- Java并发(三)----创建线程的三种方式及查看进程线程
一.直接使用 Thread // 创建线程对象 Thread t = new Thread() { public void run() { // 要执行的任务 } }; // ...
- jQuery 在图片和文字中插入内容(多种情况考虑)
昨天接到一个新的需要,在后台文章编辑器中,每一个文章的正文前面,可以单独添加一个电头字段,但是如果在富文本编辑器中最上面就添加图片的话,图片就会把电头和正文中的文字给隔开.需要做的是获取到电头字段,然 ...
- 还不知道怎么 Mock ,用这 6款工具!
以下是几个常用的国外可以mock测试的工具,供参考: MockServer: MockServer 是一个开源的 API mock 测试工具,提供了强大的模拟服务器和 mock 服务功能.MockSe ...
- 【Linux】文件及用户组合权限管理
第二周1.显示/etc目录下,以非字母开头,后面跟了一个字母以及其它任意长度任意字符的文件或目录 ls -a /etc/[^[:alpha:]][:alpha:]* 2.复制/etc目录下所有以p开头 ...
- 2022-05-16:A -> B,表示A认为B是红人, A -> B -> C,表示A认为B是红人,B认为C是红人,规定“认为”关系有传递性,所以A也认为C是红人, 给定一张有向图,方式是给定M个有
2022-05-16:A -> B,表示A认为B是红人, A -> B -> C,表示A认为B是红人,B认为C是红人,规定"认为"关系有传递性,所以A也认为C是红 ...
- Django4全栈进阶之路2 创建虚拟环境、项目、app应用、启动运行项目
一.安装虚拟环境: 命令:pip3 install virtualenv 二.安装管理工具: 命令:pip3 install virtualenvwrapper 三.新建: 命令:python -m ...
- 8张图带你全面了解kafka的核心机制
前言 kafka是目前企业中很常用的消息队列产品,可以用于削峰.解耦.异步通信.特别是在大数据领域中应用尤为广泛,主要得益于它的高吞吐量.低延迟,在我们公司的解决方案中也有用到.既然kafka在企业中 ...