elementplus el-table表格实现点击行变色效果

白开水z

已于 2023-12-08 17:45:24 修改

阅读量1.1k

点赞数 8

文章标签： vue.js 前端 elementui

于 2023-12-08 17:37:34 首次发布

本文链接：https://blog.csdn.net/li222248/article/details/134883984

版权

     <el-table :data="tableData" class="table" style="width: 100%; margin-bottom: 20px" row-key="id" border max-height="1050"
                @row-click="onTableRow" :row-class-name="tableRowClassName">



let highLightRows = ref<any>([])

function onTableRow(row: any) {
    const exists = highLightRows.value.includes(row);
    if (exists) {
        highLightRows.value = highLightRows.value.filter((item: any) => item !== row)
    } else {
        highLightRows.value.push(row)
    }
}

function tableRowClassName({ row }: any) {
    // 只能用for循环，不能用map或者foreach
    for (let i = 0; i < highLightRows.value.length; i++) {
        if (highLightRows.value[i] == row) {
            return 'highLight-row'
        }
    }
}

// 样式只能写在<style>标签里  不能写在<style scope>里
.table .el-table__body tr:hover>td {
    background-color: #ffdb20 !important;
}

.el-table .highLight-row {
    background: #ffdb20;
}