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 ...
随机推荐
- 使用 MySQL Shell 获取 MySQL 诊断信息(译)
收集全面的诊断信息可能会让人望而却步.知道要运行哪些查询以获取所需数据更像是一种艺术形式,而非其他什么.幸运的是,对于那些不太擅长艺术的人来说,MySQL Shell 使得获取这些信息变得更加容易.让 ...
- phpstorm之代码质量工具
在进行php开发的时候, 经常由于编码上的不规范导致了隐藏的bug,这里介绍代码质量工具 PHP CodeSniffer: phpcs [安装] composer require squizla ...
- Mac之终端工具iterm2
1. 安装 iTerm2 下载地址:https://www.iterm2.com/downloads.html 下载的是压缩文件,解压后是执行程序文件,你可以直接双击,或者直接将它拖到 Applica ...
- 用VuePress在GitHub Pages上搭建博客
请先点击链接RobinDevNotes,体验用VuePress搭建博客的效果(logo还没有合适的替换),目前部署在GitHub Pages上,国内访问速度还可以,再阅读本文感受来龙去脉和搭建过程. ...
- 使用mvn 将 pom文件推送到私服
1.业务场景 现在我有一个 *.pom文件 需要上传到私服. 比如 spring-cloud-dependencies-2021.0.9.pom 这个时候可以使用命令将这个文件传到私服. 2.上传脚本 ...
- 生产环境BigDecimal用错了,已哭晕在厕所。。。
大家好,我是苏三,又跟大家见面了. 前言 在日常开发中,很多小伙伴喜欢用 BigDecimal 来处理精确计算,比如钱.分数.比例啥的. 理论上,它比 double 或 float 更精确,但如果你用 ...
- Vue项目报TypeError: Cannot read properties of undefined (reading '_wrapper')
前情 最近在做一个营销活动的时候,我选择了Vue技术栈来开发. 坑位 项目看似一切都正常,但当我在绑定的js事件中去修改当前组件的data上的值时会报错:TypeError: Cannot read ...
- windbg 调试 c++ std::exception
由于c++ std::exception在windbg里面调用堆栈显示不正确,可以通过加载了系统pdb和软件pdb后,!analyze -v可以分析出来,所有需要配置系统pdb. 1.把exe,pdb ...
- Qt/C++开发经验小技巧291-295
国内站点:https://gitee.com/feiyangqingyun 国际站点:https://github.com/feiyangqingyun 关于在pro中区分linux系统,在Qt4套件 ...
- Qt编写地图综合应用60-覆盖物坐标和搜索
一.前言 地图应用中有时候需要开启悬浮工具栏,用户可以直接在地图上绘制矩形.多边形.圆形.线条等,于是需要提供一个函数接口,能够获取到用户绘制的这些图形形状对应的信息.比如坐标点.圆形的中心点和半径. ...