关于el-table中，默认高亮第一行的问题

于 2024-08-06 11:11:45 发布
阅读量1k 收藏 1
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48829367/article/details/140950506
版权

今天小编接到了一个需求，技术栈用的是vue3+ts+element-plus，然后需求就是，在一个table组件里面默认展示第一行数据显示高亮效果


简单吧，但是我这个猪脑子，那么简单。怎么调都不对，

怎么调都没有显示第一行高亮

解决：

后面看了下文档，发现通过ref这个属性的作用是 Vue.js 中用来给元素或组件注册引用信息的属性，然后我就修改一下

通过ref这个属性，在通过setCurrentRow 这个方法，用来设置当前选中的行。它接受一个数据对象作为参数，用来指定要设置为当前行的数据然后就实现了。

写这篇文章用来警醒下自己基础东西不要忘了多看文档，要注重基础，仔细一点

夏夜冷漠
关注
「element-ui」el-table点击复选框或点击数据行，当前行高亮显示
拥抱AI Design
02-07 1134
本文主要介绍el-table点击复选框或点击数据行，当前行高亮显示。
el-table让某一行默认高亮
m0_68716504的博客
03-01 2638
【代码】el-table让某一行默认高亮。
el-table默认选中高亮第一行，clearble触发事件
qq_52140056的博客
10-19 3842
el-table默认选中高亮第一行，clearble触发事件
elementui table默认第一行高亮
qq_40282446的博客
03-29 1257
vue elementui table默认第一行高亮
默认表格首行高亮
前端攻城狮的博客
08-10 776
setCurrentRow 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
el-table默认高亮第一行--【无勾选框】
DcTbnk的博客
08-24 912
// 给el-table设置ref=’multipleTableDxy‘ _this.$refs.multipleTableDxy.setCurrentRow(_this.$refs.multipleTableDxy.data[0]) // 这个是图片上edc-table组件的默认高亮第一行的写法 _this.$refs.table2.$refs.multipleTable.setCurrentRow(_this.$refs.table2.$refs.multipleTable.data[0])
Element Table的row-class-name无效与动态高亮显示选中行背景色
10-17
例如，当你尝试让第一行高亮时，可能会发现并没有生效，控制台输出的行（row）和行索引（rowIndex）都是undefined。此时，可以尝试使用更为直接的方式，比如只传入row或者rowIndex变量，然后根据实际需求进行自定义...
element plus 如何设置选中el-table和点击列表获取行信息，以及默认显示选中的行，高亮行
u010782109的博客
07-13 2005
【代码】element plus 如何设置选中el-table和点击列表获取行信息，以及默认显示选中的行，高亮行。
el-table具体高亮某一行
最新发布
03-29
在 `<el-table>` 中设置 `highlight-current-row` 属性，启用默认高亮效果： ```html <el-table ref="myTable" highlight-current-row :data="tableData"> <!-- 列定义 --> </el-table> ``` 2. **编程控制...
el-table点击行高亮与斑马线冲突
03-08
### 解决 `el-table` 中点击行高亮与斑马线样式冲突 在 Element UI 的 `el-table` 组件中，当启用斑马线样式 (`...而对于复杂的应用程序则建议尝试第一种基于事件监听的方法以便更好地管理交互行为和用户体验[^3]。
vxe-grid加载页面默认表格选中第一行高亮.vue
03-29
vxe-grid加载页面默认表格选中第一行高亮.vue
Eltable默认高亮选中某一行
Passerby_OK的博客
01-04 384
eltable默认高亮选中某一行
el-table高亮显示一行/获取高亮行/默认选中一行
qq_36566924的博客
07-19 5655
1.设置高亮行 el-table标签加上highlight-current-row 2.默认选中一行高亮 el-table标签加上 ref=‘table’ 在请求到数据后 this.$nextTick(()=>{ this.<美元符号>refs.table.setCurrentRow(res.data[0]) }) 3.获取高亮行的数据 ...
element UI 的table默认选中第一行，高亮显示
qq_45516629的博客
05-19 8248
原文链接:https://blog.csdn.net/weixin_45616483/article/details/102576800 要求：默认选中table的第一行，将其高亮显示 <el-table ref="monthlyPlanTable" v-loading="listLoading" :data="tableData" stripe highlight-current-row style="width:
vue+element table 第一行默认高亮
weixin_45685394的博客
09-29 4054
1.给table设置ref=‘multipleTable’ 2.给multipleTable设置默认值multipleTable=[] 3.在获取数据的位置加上 this.$refs.multipleTable.setCurrentRow(this.info,true);即可
element UI默认选中table的第一行，高亮显示
weixin_45616483的博客
10-15 8208
要求：默认选中table的第一行，将其高亮显示 <el-table ref="monthlyPlanTable" v-loading="listLoading" :data="tableData" stripe highlight-current-row style="width: 100%" @ro...
elment-UI el-table 有差异 高亮
zhongmei121的专栏
08-17 708
&lt;template&gt; &lt;el-table border style="width: 100%;" :data="list" :row-style="Highlight" &gt;&lt;/el-table&gt; &lt;/template&gt;       &lt;script&gt; export default { me
【Vue实用功能】Vue Element-UI Table点击某一行将该行设置为高亮和默认第一行高亮
weixin_44590591的博客
04-21 4852
Vue Element-UI Table点击某一行将该行设置为高亮和默认第一行高亮 默认第一行高亮：highlight-current-row ，切换时也高亮 <el-table :data="taskTabList" style="width: 100%" :data="taskTabList" border highlight-current-row ref="monthlyPlanTable"> <el-table-column prop=
el-table刷新后保持高亮并改变状态字段
不积跬步何以至千里
07-17 799
1、定义highlight-current-row 是否高亮行。3、点击刷新、重置、高级搜索等不高亮 右边也不显示具体内容。4、将higLightRow放在自己所需要调用的地方。2、点击右边确认 左侧依旧高亮并且改变启动状态颜色。1、点击左侧右边显示具体内容。3、高亮显示方法 重点是。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值