首页 > 其他分享 >el-table当前行的获取和设置,用于表格行操作

el-table当前行的获取和设置,用于表格行操作

时间:2024-05-11 10:11:01浏览次数:18  
标签:el currentRow 表格 listData 当前 table message data

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,currentRow,表格,listData,当前,table,message,data
From: https://www.cnblogs.com/sdlz/p/18185860

相关文章

  • 使用stable diffusion设计logo的提示词
    使用stablediffusion设计logo的提示词StableDiffusion是一种基于图像处理和机器学习的算法,可以用于生成各种类型的图像,包括Logo设计。本文将介绍如何使用StableDiffusion来设计Logo,并提供一些提示词以帮助读者更好地理解和应用这种技术。1.了解StableDiffusion的基本原理在......
  • Elasticsearch 自定义评分
    一.概述在前几章中,讲到了如何分词,以及分词的种类。分词后在进行全文检索时,返回结果如何确定用户真正想看到的, 那数据结果如何排序呢?比如在电商中:搜索一个商品关键词,默认是综合排序,商品如何顺序是经过一定的算法策略,也是为了提高用户的体验。Elasticsearch使用评分算......
  • elasticsearch 数据远程备份与还原
    官方文档:备份集群:https://www.elastic.co/guide/cn/elasticsearch/guide/current/backing-up-your-cluster.html#backing-up-your-cluster恢复数据:https://www.elastic.co/guide/cn/elasticsearch/guide/2.x/_restoring_from_a_snapshot.htmles官方默认是备份数据到本地的,如果......
  • NetSuite-Get-specific-Custom-Record-Types-and-related-sub-Custom-Fields-CarlZeng
    NetSuite:GetspecificCustomRecordTypesandrelatedsubCustomFields背景以前当使用search.create({})来获取数据时,我们需要制定特定的数据返回列;例如:search.createColumn(options)而query可以使用SELECT*FROM来动态返回所有的数据列(这在有的时候是一个优点),那么如......
  • Intel 显卡单机多卡 FSDP 模型 checkpointing 时 Assert Out
    Intel显卡单机多卡FSDP模型checkpointing时AssertOut Intel显卡单机多卡FSDP模型checkpointing时AssertOut现象根因顺藤摸瓜抽丝剥茧解法最后的话现象使用HuggingFaceTrainer在单机多卡环境下对LLAMA2-7B进行LoRAfinetuning时,......
  • Electron桌面应用
    Electron介绍Electron集成了chromium(支持最新特性的浏览器)与Node.js(javascript运行时,可实现文件读写)NativeAPI是(提供统一原生界面操作的能力)工作流程:启动APP启动主进程,创建窗口,加载指定界面,开启渲染进程,渲染进程需要进行通信(如新增歌曲打开文件夹选择MP3文件)需通过主进程调用......
  • 【java】【集合类】HashMap 与HashTable的区别
    1.继承的父类不同HashMap是继承自AbstractMap类,而HashTable是继承自Dictionary类。不过它们都实现了同时实现了map、Cloneable(可复制)、Serializable(可序列化)这三个接口HashMap继承、实现关系如下: HashTable继承、实现关系如下: Dictionary类是一个已经被废弃的类(见其源码......
  • Camunda JavaDelegate另一种实现
    lambada实现@ConfigurationpublicclassCommonDelegate{@Bean("test")JavaDelegatetestDelegate(){returnexecution->{System.out.println("test>>>>>");Map<String,Strin......
  • ElementUI——elementui重复引入样式
    前言按着文档操作后发现存在样式重复引入的问题,尝试了一系列的配置都未生效,最终是直接生成样式导入解决;文档:https://element.eleme.io/#/zh-CN/component/custom-theme#yin-ru-zi-ding-yi-zhu-ti工具:https://elementui.github.io/theme-chalk-preview/#/zh-CN内容使用工具生......
  • IntelliJ IDEA 快捷键大全 Win 版
    一、Ctrl快捷键快捷键说明常用Ctrl+F在当前文件进行文本查找√Ctrl+R在当前文件进行文本替换√Ctrl+Z撤销√Ctrl+Y删除光标所在行或删除选中的行√Ctrl+X剪切光标所在行或剪切选择内容 Ctrl+C复制光标所在行或复制选择内容......