Table选中行背景颜色

网站

再谈Element Plus改变Table选中行背景颜色的简单方法

此前已经用非常简单的方式进行了样式干预实现全局表格选中行的高亮颜色调整，其实还可以进行非常多的操作实现这一目的，下面再分享一种。修改CSS 按如下路径找到table选中行背景色的CSS文件。

node modules > element-plus > theme-chalk >  eltable.css >  el-table

1	node modules > element-plus > theme-chalk > eltable.css > el-table

找到这一句：

--el-table-current-row-bg-color:var(--el-color-primary-light-9);

1	--el-table-current-row-bg-color:var(--el-color-primary-light-9);

可以看到，这里定义了选中行高…

蓝洛水深

2023年4月26日

001.2K0

网站

Element Plus改变Table选中行背景颜色的最简单方法

无论是Element Plus官方还是网络上，其实都给了很多方法，但是实践下来发现不一定能成功，并且具有一定的复杂性，这里分享一种非常简单的方法。比如我们要修改Table选中行背景颜色，只需要再App.vue进行简单修改即可。在onMounted中对颜色进行定义即可全局生效。

onMounted(() => {
    document.body.style.setProperty('--el-color-primary-light-9', '#CCEEFF')

    window.onresize = () => {
        settingsStore.setMode(document.documentElement.clientWidth)
    }
    window.onresize()
})


只需要插入这句：

document.body.style.setProperty('--el-color-primary-light-9', '#CCEEFF')

1

2

3

4

5

6

7

8

9

10

11

12

13

onMounted(() => {

document.body.style.setProperty('--el-color-primary-light-9', '#CCEEFF')

window.onresize = () => {

settingsStore.setMode(document.documentElement.clientWidth)

}

window.onresize()

})

只需要插入这句：

document.body.style.setProperty('--el-color-primary-light-9', '#CCEEFF')

至于颜色，这里提…

蓝洛水深

2023年4月25日

001.1K0