el-table当前行的获取和设置,用于表格行操作
1、在vue的data区声明当前行变量对象,如果当前行的信息用于了按钮的状态则需要赋予默认值,否则会报找不到属性的错误,比如下面会用到当前记录的status属性值控制按钮是否可用。
//表格选中的行
data() {
return {
currentRow:{status:'0'},
}
}
2、在methods方法列表中声明表格活动行变更的方法,并绑定表格的current-change事件
//当前行变更时
handleCurrentChange: function(val){
this.currentRow = val !== null ? val:{status:'0'};
}, //绑定事件
<el-table ref="myTable" @current-change="handleCurrentChange">
3、表格查询刷新数据的事件中对当前行进行变量赋值
searchData: function() {
//获取数据前赋默认值
this.currentRow = {status:'0'};
drugs.apiGetAllData(queryParam)
.then(response => {
// 一些逻辑代码
this.listData = response.data.list;
//赋值当前行变量,并让表格默认选中第一条数据
if (this.listData.length > 0 ) {
this.$refs.myTable.setCurrentRow(this.listData[0]);
this.currentRow = this.listData[0];
}
})
.catch(error => {
this.$message.error('查询失败!失败原因:' + error.response.data.message);
});
},
4、声明一个是否有当前活动行的判断函数,在表格行操作按钮点击的时候,进行判断并执行响应的业务逻辑
//当前选择行是否为空
isEmptyRow: function(){
if (this.currentRow == null || this.currentRow.id == null){
this.$message.warning('请先选中要操作的记录行!');
return true;
}
}, //按钮事件
<sun-button type="primary" @click="rowEdit" hint="修改记录">编辑</sun-button> //编辑操作业务代码
rowEdit: function (){
//判断当前行信息
if (this.isEmptyRow()){
return;
}
//做一些逻辑处理
}).catch(err => {
this.$message.error('编辑失败!<br>' + err.response.data.message);
})
},
el-table当前行的获取和设置,用于表格行操作的更多相关文章
- Jqeury获取table当前行与指定列
今天遇到了一个Jqeury获取table当前行与指定列的问题: 大概的实现要求是一个页面中,上面有几个input输入框,下面有一个table,当在输入框中输入内容的时候,点击添加按钮的时候,在下面ta ...
- jquery 获取和设置 checkbox radio 和 select option的值?
============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是= value 的简写! val就是valu ...
- DataGridView中获取与设置当前选中行以及SelectedRows和CurrentRow注意区分
场景 DataGridView怎样实现添加.删除.上移.下移一行: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10281414 ...
- termios, tcgetattr, tcsetattr, tcsendbreak, tcdrain, tcflush, tcflow, cfmakeraw, cfgetospeed, cfgetispeed, cfsetispeed, cfsetospeed - 获取和设置终端属性,行控制,获取和设置波特率
SYNOPSIS 总览 #include <termios.h> #include <unistd.h> int tcgetattr(int fd, struct termio ...
- 【VC++技术杂谈002】打印技术之获取及设置系统默认打印机
本文主要介绍如何获取以及设置系统的默认打印机. 1.获取系统中的所有打印机 获取系统中的所有打印机可以使用EnumPrinters()函数,该函数可以枚举全部的本地.网络打印机信息.其函数原型为: B ...
- 使用 antd Table组件, 异步获取数据
使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...
- 关于获取、设置css样式封装的函数入门版
<html> <head> <meta charset="UTF-8"> <title>CSS样式的获取和设置:简单版</ti ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- [WinAPI] API 14 [获取、设置文件属性和时间]
>_< 为了获取文件属性,用户可以使用GetFileAttributes与GetFileAttributesEx函数. GetFileAttributesEx函数除了返回文件属性外,还返回 ...
- [WinAPI] API 12 [获取程序所在的目录、程序模块路径,获取和设置当前目录]
Windows系统提供一组API实现对程序运行时相关目录的获取和设置.用户可以使用GetCurrentDirectory和SetCurrentDirectory获取程序的当前目录,获取模块的路径使用G ...
随机推荐
- linux 自动输入密码脚本避免密码确认
有时候需要执行一个小脚本,就把一部分命令集合起来,我们可以使用 && 或者 .sh 脚本换行. 而有些时候涉及权限需要输入密码就出现了一些客户端会卡在输密码的界面让用户输入 脚本会暂停 ...
- python爬虫 正则表达式详解
正则表达式 最近学校布置了一个关于python爬虫的期末作业,而我之前对python爬虫一直都比较感兴趣但是没有系统的学过,就想借此机会开个新坑来系统学习和应用python爬虫,那我们开始吧 正则表达 ...
- 在vue2中按顺序调用多个接口,接收返回数据
最近有一个点一个按钮调用多个接口,并且按顺序串行调用,根据后端返回的逻辑,区分接口之间的串行关系,前面的接口失败是否继续执行下面接口,有两种方式,都是循环调用接口,实现方式有点差别 第一种reduce ...
- js之模块导入与导出:export、export default、module.exports、exports
前两者export.export default可为一组,是es6的规范,和import匹配,import是es6中的语法标准:后两者module.exports.exports可为一组,是commo ...
- 2024-11-27:字符串的分数。用go语言,给定一个字符串 s,我们可以定义其“分数”为相邻字符的 ASCII 码差值绝对值的总和。 请计算并返回字符串 s 的分数。 输入:s = “hello“
2024-11-27:字符串的分数.用go语言,给定一个字符串 s,我们可以定义其"分数"为相邻字符的 ASCII 码差值绝对值的总和. 请计算并返回字符串 s 的分数. 输入:s ...
- 三菱电梯综合监控系统适配 lonele.exe 由 20180418 降级至 20150930 而调整相应的 msde2000 数据库
win10 x86 系统下程序文件的部分目录可能是 电梯综合监控系统 C:\PROGRAM FILES\上海三菱电梯有限公司 ├─电梯综合监控系统 │ │ AxInterop.BRTMFSHX.dll ...
- 通过加密的方式做身份鉴权—Demo设计
目录 鉴权方式 账号+密码 账号+短信验证码 第三方渠道鉴权--微信 Reference 本文只是一个Demo设计,仅供学习思路,并不能用于真实的线上业务,因为有很多漏洞. 一般线上应用都需要对用户身 ...
- ABS函数:C语言与Excel中的绝对值计算
ABS函数:C语言与Excel中的绝对值计算 ABS函数在不同的编程和计算环境中有着相似但又有所区别的用途.在本文中,我们将重点探讨ABS函数在C语言中的应用,同时也会结合Excel中的ABS函数进行 ...
- 【UI框架】ANtDesignVue中的Content超过一页显示问题
假设content部分是绿色 当内容超出一页之后,滑下去,后面的都没有底色. 如果footer有内容,content的内容甚至会和footer内容重叠在一起,同时,footer的内容随着下滑,位置就不 ...
- Win11右键显示更多选项设置教程
Win11如何设置右键显示更多选项?如果你觉得每次右键菜单,都是需要点击"显示更多选项"十分麻烦,那么可以通过设置,让其直接显示出现.那么应该如何操作呢?下面小编就为大家带来具体的 ...