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); }) },
凡哥,别他妈吹牛逼了
分类:
Vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
2021-05-11 C#中的内部函数(子函数)
2020-05-11 0511-Properties集合
2020-05-11 0511-FileWrite字符输出流和JDK7中try..finally新的特性
2020-05-11 0425-FileRead字符输入流