1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > element-UI里table设置默认高亮一行或者选中某一行

element-UI里table设置默认高亮一行或者选中某一行

时间:2024-07-10 00:57:21

相关推荐

element-UI里table设置默认高亮一行或者选中某一行

本方案支持颜色自定义,高亮行数自定义,可高亮多行,可定义多个颜色,主要实现方式是css样式,代码简单易懂,下面看效果和代码吧:

当前效果:

预期效果:

代码:这是HTML代码 绑定这个属性:row-class-name=“tableRowClassName”

<el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>

这是JS代码 注册这个方法tableRowClassName(),这里传的rowIndex就是需要高亮的数据在数组里面的下标,返回的class类名就是你自己定义的class类名。

methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},

这是CSS代码,颜色可以自定义,class类名可自定义

<style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。