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;
}
相关推荐
江湖行骗老中医4 分钟前
npm i --legacy-peer-deps
前端·npm·node.js
m0_526119408 分钟前
评论的组件封装
开发语言·前端·javascript
java—大象11 分钟前
基于JavaWeb开发的Java+SpringBoot+vue+element实现物流管理系统
java·数据库·vue.js·spring boot·课程设计
GISer_Jing24 分钟前
Cesium加载高速公路样式线图层和利用CSS撰写高速公路样式
前端·css·webgl
竹竹零27 分钟前
HTML第一课 语法规范与常用标签
前端·html
CallMe_CrabXie1 小时前
vue3+el-tale封装(编辑、删除、查看详情按钮一起封装)
javascript·vue.js·react.js·typescript
fullyouth1 小时前
Javascript常见面试手写题
javascript·面试
人间有清欢1 小时前
三、导航&事件&生命周期
前端·javascript·微信小程序
qq_274499931 小时前
typeof null返回值为什么是object?
开发语言·前端·javascript
xiaolongyu32 小时前
2 html5 浏览器已经支持的新API
前端·html·html5