el-table 高亮某一行

最新推荐文章于 2025-03-20 15:12:55 发布

wangooo

最新推荐文章于 2025-03-20 15:12:55 发布

阅读量7.9k

点赞数 5

分类专栏： JavaScript vue 文章标签： vue javascript elementui

本文链接：https://blog.csdn.net/wangooo/article/details/118106900

版权

JavaScript 同时被 2 个专栏收录

20 篇文章

订阅专栏

vue

19 篇文章

订阅专栏

本文介绍了如何在Element UI的el-table组件中启用`highlight-current-row`属性来高亮当前行，并展示了如何通过`setCurrentRow`方法设置或取消高亮。此外，还讲解了利用`row-class-name`属性自定义行样式，以及改变默认高亮颜色的方法。示例代码包括了设置和取消高亮的逻辑，以及自定义样式的CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 highlight-current-row 属性

el-table 加上 highlight-current-row 属性。

<el-table ref='tTable' :data="dataList" highlight-current-row></el-table>

调用 setCurrentRow(row, true) 设置当前行高亮，row为dataList里面的数据。

selectRow(row) {
     if (row) {
       this.$refs.tTable.setCurrentRow(row, true);
     } else {
       this.$refs.tTable.setCurrentRow();  // 取消高亮
     }
}

如果要改变默认的高亮的颜色。这样就把项目中所有el-table的高亮颜色都改了。

<style lang="scss">
    .el-table__body tr.current-row>td {
        background: #453878 !important;
    }
</style>

使用 row-class-name

<el-table ref='transcriptTable' :data="sentenceList" height="400" :row-class-name="transcriptTableRowClassName"></table>

    transcriptTableRowClassName({row, rowIndex}) {
        if (rowIndex === this.curSentenceRowIndex) {
            return 'speak-row';
        }
        return '';
    },

如果是当前行时，返回不同的样式。

<style lang="scss">
    .el-table .speak-row {
        color: darkorange;
        font-size: 15px;
        font-weight: 500;
        background: #f0f9eb;
    }
</style>