改变elementui的table的选中行高亮显示

最新推荐文章于 2024-07-27 16:31:32 发布
最新推荐文章于 2024-07-27 16:31:32 发布
阅读量2.5w 收藏 8
点赞数 4
文章标签： elementui css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39940205/article/details/84257037
版权 
:row-class-name="tableRowClassName"在渲染表格的时候就调用了，不能用来响应点击事件改变行的颜色。
可以给表格添加:highlight-current-row属性，高亮显示当前行。然后通过修改css来改变颜色，像这样
  .el-table__body tr.current-row>td {
        background: #f57878 !important;
    }

 进微信群和大佬面对面学习交流👇🏻👇🏻👇🏻

 

 

阿花落知多少
关注
「element-ui」el-table点击复选框或点击数据行，当前行高亮显示
AIGC大前端小王子
02-07 865
本文主要介绍el-table点击复选框或点击数据行，当前行高亮显示。
element-ui表格el-table列多选框勾选后，选中行高亮
轻枫丶的博客
12-17 5796
为el-table添加一列多选框，勾选后会将该行高亮显示。 <template> <div> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :row-class-...
vs+element-ui highlightjs 样式
08-20
highlightjs 页面显示源码借鉴 element-ui 和vs结合实现的页面样式 实现教程可以去我的博客；里面翻看教程
【element-ui】el-table表格高亮选中
jkpazhang的博客
03-04 1389
由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。highlight-current-row 是否要高亮当前行。
el-table点击某一行实现高亮
最新发布
weixin_72439307的博客
07-27 421
表格点击行高亮
element table 单选按钮_element-UI非radio按钮单选Table表格(highlight-current-row),头
weixin_26776943的博客
01-14 506
element-UI非radio按钮单选Table表格(highlight-current-row),头element-UI非radio按钮单选Table表格(highlight-current-row),头部背景颜色更换以及默认某行不可选中不可高亮1.首先大家现在查阅所有资料都可能无法找到关于highlight-current-row单选表格中的问题，这也是我在开发并且秃头的过程中踩过的好多坑，...
element table选中高亮处理
kuguhuan的博客
10-10 1233
我的解决方法用到了@selection-change="handleSelectionChange" :row-style="rowClass"， 在handleSelectionChange中取到所有checkbox选中的内容保存在selectData， 然后监听selectData 判断选中行在table列表里面的位置，将所有的index保存在selectRow中， 最后在rowClass中给对应的行添加背景色 data(){ return { selectRow:[],
vue修改elementui表格el-table选中行的高亮色highlight-current-row
票票的博客
10-14 7004
css 代码 ::v-deep .el-table__body tr.current-row>td { color: #fff; background: #409EFF!important; }
element ui + vue 表格多选后选中行高亮/变色
weixin_42555643的博客
11-13 7889
element ui官网的table多选后的样式如下图 ​​​​​​​​ 我们想要的效果如下图（选中的是有底色/高亮的) 用到的主要知识点如下图(2张） 为了方便后期修改颜色，我们把样式写在了公共样式中–common.less //table选中高亮 .el-table .slecleRowColor { background: #EAF4FF !important; } //改变element ui自带的hover高亮颜色 .el-table tbody tr:hover &
elementui table表格 点击行实现高亮
weixin_44348028的博客
10-07 2621
记得要将 highlight-current-row 高亮属性打开 <template> <el-table highlight-current-row :data="table1" :row-style="{height: '20px'}" :header-cell-style="{background:'#e6e6e6',color:'#000000'}" border style="width: 30%;"> <el-table-
vxe-grid加载页面默认表格选中第一行高亮.vue
03-29
vxe-grid加载页面默认表格选中第一行高亮.vue
element-UI非radio按钮单选Table表格(highlight-current-row),头部背景颜色更换以及默认某行不可选中不可高亮
drift_away_的博客
09-03 2825
1.首先大家现在查阅所有资料都可能无法找到关于highlight-current-row单选表格中的问题，这也是我在开发并且秃头的过程中踩过的好多坑，拿出来给大家分享分享。 首先并不是radio单选表格，而是这种带色块的单选表格 2.也就是配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为inde
el-table 高亮显示选中的行(element-ui)
Major_S的博客
11-02 3211
Table 组件提供了单选的支持， 只需要配置 highlight-current-row 属性即可实现单选。之后由 current-change 事件来管理选中时触发的事件，它会传入 currentRow，oldCurrentRow。如果需要显示索引，可以增加一列 el-table-column，设置 type 属性为 index 即可显示从 1 开始的索引号。选择单行数据时使用色块表示。
Element 中的el-table 点击高亮某行
weixin_43268050的博客
08-09 1078
项目中封装的table组件没有点击某行高亮显示。在我要写的页面使用element中的。属性可以实现单选效果。可以实现点击高亮显示。
el-table 点击每行高亮
dmx1521856051的博客
06-26 858
【代码】el-table 点击每行高亮。
vue组件中使用elementUI的el-table组件的(row-class-name)动态修改每一行的样式无效问题
ld395353765的博客
01-15 4498
问题描述 vue项目中，需要给vue表格中的每一行加入自定义的样式，根据文档给<el-table>组件加上row-class-name属性即可，直接加入该属性并且在当前vue组件中配置对应class发现样式并没有生效。 解决方案一、使用全局属性 在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class...
ElementUI-table高亮问题
孤灯人
03-19 1973
第一类：初始化或刷新界面默认第一行高亮 //1.0 加入:row-class-name="tableRowClassName" <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> //2.0 methods中写入方法 methods: { tableRowClassName({row, rowIndex}) { if (rowIndex === 0) { .
Where is element.highlight()? - Ext JS
laravel framework
04-19 59
In ext .40 it was possible to do this: getEls('div.some-class', true).highlight(); In 1.0r9 I tried it this way: Ext.select('div.some-class').highlight(); Unfortunately, it complains abou...
el-table高亮显示一行/获取高亮行/默认选中一行
qq_36566924的博客
07-19 5165
1.设置高亮行 el-table标签加上highlight-current-row 2.默认选中一行高亮 el-table标签加上 ref=‘table’ 在请求到数据后 this.$nextTick(()=>{ this.<美元符号>refs.table.setCurrentRow(res.data[0]) }) 3.获取高亮行的数据 ...
el-table多选选中行高亮
06-06
您好！针对您的问题，可以通过el-table的highlight-current-row属性来实现选中行高亮显示。而多选框则可以通过el-table-column中的type属性指定为selection来添加。具体实现可以参考以下代码： ``` <el-table :data="tableData" highlight-current-row @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> ``` 在以上代码中，highlight-current-row属性用来实现选中行高亮显示，而el-table-column中的type属性指定为selection来添加多选框。同时，我们还需要在el-table上添加@selection-change事件，来处理选择变化的逻辑。具体实现方法可以参考以下代码： ``` <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, { name: '赵六', age: 24, gender: '女' } ], selectedRows: [] }; }, methods: { handleSelectionChange(rows) { this.selectedRows = rows; } } }; </script> ``` 在以上代码中，我们通过selectedRows数组来保存选中的行数据，并在handleSelectionChange方法中更新该数组。希望能够帮到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值