问题:vue2+elementui,tabs切换显示表格并设置表格选中行高亮失败

错误示范:

1.直接setCurrentRow失败(this.currentRow是之前保存的表格当前选中行的数据)

javascript 复制代码
this.$refs.table.setCurrentRow(this.currentRow);

2.以为是表格没生成就执行了setCurrentRow导致设置不成功,所以使用了this.$nextTick,依旧失败

javascript 复制代码
this.$nextTick(() => {
	this.$refs.table.setCurrentRow(this.currentRow);
});

最后解决:

好吧,最后发现问题出在setCurrentRow的参数上,不管你有没有改动表格数据,用你需要选中的行id,去遍历表格数据,遍历到item.id===id,则row =item,最后用this.$refs.table.setCurrentRow(row)可以解决。

完整代码如下:

javascript 复制代码
this.$nextTick(() => {
	let currentRow = this.tableData.filter(item => {
		return item.id === this.currentRowId;
	});
	console.log("有选中行", currentRow[0]);
	this.$refs.table.setCurrentRow(currentRow[0]);
});

这个nextTick因为写了就没去掉,不包可能也行吧。

这是之前参数的由来:

参考:

相关推荐
珑墨几秒前
【pnpm 】pnpm 执行 xxx 的 底层原理
前端·javascript
中草药z1 分钟前
【Vibe Coding】初步认识LangChain&LangGraph
前端·langchain·html·agent·cursor·langgraph·vibe
弹简特10 分钟前
【JavaEE03-前端部分】JavaScript入门:给网页注入灵魂,从基础到实战玩转交互!
前端·javascript·交互
天人合一peng11 分钟前
unity获得和修改button的text(TMP)
java·前端·unity
jiayong2312 分钟前
Vue 3 面试题 - 状态管理与数据流
前端·javascript·vue.js
摇滚侠2 小时前
npm 设置了阿里云镜像,然后全局安装了 pnpm,pnpm 还需要设置阿里云镜像吗
前端·阿里云·npm
程序员清洒8 小时前
Flutter for OpenHarmony:GridView — 网格布局实现
android·前端·学习·flutter·华为
VX:Fegn08958 小时前
计算机毕业设计|基于ssm + vue超市管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·课程设计
0思必得09 小时前
[Web自动化] 反爬虫
前端·爬虫·python·selenium·自动化
LawrenceLan9 小时前
Flutter 零基础入门(二十六):StatefulWidget 与状态更新 setState
开发语言·前端·flutter·dart