vue2+element ui 中的el-table 选中当前行当前行变色

javascript 复制代码
 <el-table class="eltable" ref="multipleTable" :data="tableData" style="margin-top: 50px;width: 100%;"
                    :row-class-name="tableRowClassName" @row-click="rowClick">
                    <el-table-column v-for="(item, index) in tableTitleList" :label="item.name" :key="index"
                        :prop="item.prop" :width="item.width" align="center">
                    </el-table-column>
                </el-table>

方法:

javascript 复制代码
   rowClick(row, column, event) {
            
            console.log(row,column);
            this.selectIndex = row.index;
        },
        // 行选中样式
        tableRowClassName({
            row,
            rowIndex
        }) {
            row.index = rowIndex 
            if (rowIndex == this.selectIndex) {
                return 'success-row';
            }
        },

样式:

javascript 复制代码
::v-deep .success-row {
    background-color: #81D3F8 !important;
}
相关推荐
G***66915 分钟前
前端框架选型:React vs Vue深度对比
vue.js·react.js·前端框架
天外来物19 分钟前
element-plus主题配置及动态切换主题
前端·css·element
flypwn22 分钟前
justCTF 2025JSpositive_player知识
开发语言·javascript·原型模式
晴殇i39 分钟前
这个前端工具杀疯了!发布一周狂揽 10k Star,Snapchat 开源框架重新定义跨平台
前端·程序员
孟祥_成都1 小时前
打包票!前端和小白一定明白的人工智能基础概念!
前端·人工智能
小满zs1 小时前
Next.js第六章(平行路由)
前端
孤狼warrior1 小时前
公司信息建设库数据 使用调用堆栈的JS逆向爬虫
javascript·爬虫
小满zs1 小时前
Next.js第七章(路由组)
前端
Mountain and sea2 小时前
发那科机器人指令详解:从入门到精通
前端·机器人
泯泷2 小时前
Tiptap 深度教程(四):终极定制 - 从零创建你的专属扩展
前端·javascript·架构