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当前行的获取和设置,用于表格行操作的更多相关文章

  1. Jqeury获取table当前行与指定列

    今天遇到了一个Jqeury获取table当前行与指定列的问题: 大概的实现要求是一个页面中,上面有几个input输入框,下面有一个table,当在输入框中输入内容的时候,点击添加按钮的时候,在下面ta ...

  2. jquery 获取和设置 checkbox radio 和 select option的值?

    ============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是= value 的简写! val就是valu ...

  3. DataGridView中获取与设置当前选中行以及SelectedRows和CurrentRow注意区分

    场景 DataGridView怎样实现添加.删除.上移.下移一行: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10281414 ...

  4. 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 ...

  5. 【VC++技术杂谈002】打印技术之获取及设置系统默认打印机

    本文主要介绍如何获取以及设置系统的默认打印机. 1.获取系统中的所有打印机 获取系统中的所有打印机可以使用EnumPrinters()函数,该函数可以枚举全部的本地.网络打印机信息.其函数原型为: B ...

  6. 使用 antd Table组件, 异步获取数据

    使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...

  7. 关于获取、设置css样式封装的函数入门版

    <html> <head> <meta charset="UTF-8"> <title>CSS样式的获取和设置:简单版</ti ...

  8. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  9. [WinAPI] API 14 [获取、设置文件属性和时间]

    >_< 为了获取文件属性,用户可以使用GetFileAttributes与GetFileAttributesEx函数. GetFileAttributesEx函数除了返回文件属性外,还返回 ...

  10. [WinAPI] API 12 [获取程序所在的目录、程序模块路径,获取和设置当前目录]

    Windows系统提供一组API实现对程序运行时相关目录的获取和设置.用户可以使用GetCurrentDirectory和SetCurrentDirectory获取程序的当前目录,获取模块的路径使用G ...

随机推荐

  1. Redis性能优化的18招

    前言 Redis在我们的日常开发工作中,使用频率非常高,已经变成了必不可少的技术之一. Redis的使用场景也很多. 比如:保存用户登录态,做限流,做分布式锁,做缓存提升数据访问速度等等. 那么问题来 ...

  2. QT6.8 编译 MSVC2022-64位MySQL驱动

    QT6.8没有编译MySql驱动,也没有.pro的项目文件,只能自己想办法编译,网上找了很多方法,终于找到了可以成功编译的方法,下面将我的编译过程详细记录如下: [声明:本文为原创,未经允许,不得转载 ...

  3. 高性能计算-gemm-mpi并行计算优化(8)

    1. 目标: 矩阵A(MK) 矩阵B(KN)相乘,计算结果 C(M*N);本测试将使用不同的数据分块方式.MPI通信接口.数据循环模型,测试通信及计算效率,计算耗时为程序用户态和核心态的占用cpu时间 ...

  4. 使用JConsole监控进程、线程、内存、cpu、类情况

    Jconsole简介: Jconsole是一个JMX兼容的监视工具.它使用Java虚拟机的JMX机制来提供运行在Java平台的应用程序的性能与资源耗费信息. 监控进程使用方法如下:由于JConsole ...

  5. element table 合并同类项并输出后台返回数据

    table的样式如下 后台返回的数据格式是按照横着来的,因为表头是经过处理的,而且是作为独立出来的数据返给前端的,所以当我们进行数据填充的时候需要用到后台返回的完整的数据,要想一一对应的话,我们需要进 ...

  6. 终端工具之Tabby

    我工作中用的最多的工具之一就是「终端连接工具」了,因为经常和 Linux 服务器打交道,经常在上面跑代码.排查系统问题等等. Windows 系统最常用的就是 Xshell 这款终端工具了,但是它只能 ...

  7. python语言实现_通过端口转发实现跨网络(多网络之间)通信_science_network

    本文使用python语言实现了一个端口转发的程序,该程序可以实现多网络之间的信息通信,当然这里有个前提,那就是多个网络都在一台主机上有可以连通的端口. 之所以有这个编写代码的需求,是因为最近使用的sc ...

  8. 使用 JsonSchema 校验 JSON数据

    有时候JSON 数据格式需要校验是否合法,我们可以使用 JsonSchema 来校验数据是否合法. 引入 pom.xml https://json-schema.org/ <dependency ...

  9. OS之《机械硬盘》

    数据的组织 一个磁盘设备 ---->多个物理盘片 一个物理盘片---->正反两面存储面 一个存储面---->多个磁道(每个磁道上存储容量时一样的,可存储相同数目的二进制位),所以,内 ...

  10. QT日志类SimpleQtLogger的简单记录

    在现代软件开发中,日志记录是必不可少的部分.它不仅帮助开发者在调试和维护软件时了解程序的运行状态,还能提供关键的错误信息.对于使用Qt框架开发应用程序的开发者来说,选择一个合适的日志库至关重要.本文将 ...