vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色
更新時(shí)間：2023年11月16日 10:09:41 作者：茁壯成長(zhǎng)的凌大大
這篇文章主要介紹了vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色
從Element網(wǎng)站上找到對(duì)于table表格的整行選中的效果
如下：
但是默認(rèn)的這個(gè)整行選中背景顏色有點(diǎn)淺，如果相對(duì)其修改背景顏色，可以修改默認(rèn)樣式
如下：
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td {
color: #fff;
background-color: #a2a4a7!important;
}
修改了當(dāng)前頁(yè)的這個(gè)樣式后，會(huì)看到下邊的效果：
highlight-current-row和@row-click一起使用問(wèn)題
elementui官方文檔
使用后效果如下：
chrome開(kāi)發(fā)者模式Elements中觀察作用樣式
Vue單文件在scss中修改樣式如下即可
::v-deep .el-table__body tr.current-row > td {
background: #f0f9eb !important;
}修改后效果如下：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用GraphVis開(kāi)發(fā)無(wú)限拓展的關(guān)系圖譜的實(shí)現(xiàn)
本文主要介紹了vue使用GraphVis開(kāi)發(fā)無(wú)限拓展的關(guān)系圖譜，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目
后臺(tái)管理系統(tǒng)是我們?nèi)粘ｉ_(kāi)發(fā)學(xué)習(xí)經(jīng)常遇到的一個(gè)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名
這篇文章主要介紹了vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家介紹了vite與xcode環(huán)境變量配置記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue3中安裝使用vue-i18n實(shí)時(shí)切換語(yǔ)言且不用刷新
這篇文章主要介紹了vue3中安裝使用vue-i18n實(shí)時(shí)切換語(yǔ)言不用刷新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問(wèn)題的解決方法
這篇文章主要介紹了SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問(wèn)題,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue 避免變量賦值后雙向綁定的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
基于node+vue實(shí)現(xiàn)簡(jiǎn)單的WebSocket聊天功能
最近學(xué)習(xí)了一下websocket的即時(shí)通信，感覺(jué)非常的強(qiáng)大，這里我用node啟動(dòng)了一個(gè)服務(wù)進(jìn)行websocket鏈接，然后再vue的view里面進(jìn)行了鏈接，進(jìn)行通信，廢話不多說(shuō)，直接上代碼吧2020-02-02
elementUI的table表格改變數(shù)據(jù)不更新問(wèn)題解決
最近在做vue的項(xiàng)目時(shí)發(fā)現(xiàn)了一個(gè)問(wèn)題，今天就來(lái)解決一下，本文主要介紹了elementUI的table表格改變數(shù)據(jù)不更新問(wèn)題解決，感興趣的可以了解一下2022-02-02
詳解vue-cli 本地開(kāi)發(fā)mock數(shù)據(jù)使用方法
這篇文章主要介紹了詳解vue-cli 本地開(kāi)發(fā)mock數(shù)據(jù)使用方法，如果后端接口尚未開(kāi)發(fā)完成，前端開(kāi)發(fā)一般使用mock數(shù)據(jù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05