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開發(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 組件中使用 transition 和 transition-group實(shí)現(xiàn)過(guò)渡動(dòng)畫
本文給大家分享一下vue 組件中使用 transition 和 transition-group 設(shè)置過(guò)渡動(dòng)畫,總結(jié)來(lái)說(shuō)可分為分為 name 版, js 鉤子操作類名版, js 鉤子操作行內(nèi)樣式版，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-07-07
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue腳手架及vue-router基本使用，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
el-table表頭使用el-dropdown出現(xiàn)兩個(gè)下拉框的問(wèn)題及解決方法
本文給大家分享el-table在固定右邊列時(shí),表頭使用el-dropdown會(huì)出現(xiàn)兩個(gè)下拉框的解決方法,感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue3 + TypeScript 開發(fā)總結(jié)
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容，感興趣的話一起來(lái)看看吧2021-08-08
詳解vue渲染從后臺(tái)獲取的json數(shù)據(jù)
這篇文章主要介紹了詳解vue渲染從后臺(tái)獲取的json數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
在Echarts圖中給坐標(biāo)軸加一個(gè)標(biāo)識(shí)線markLine
這篇文章主要介紹了在Echarts圖中給坐標(biāo)軸加一個(gè)標(biāo)識(shí)線markLine，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
一個(gè)vue組件庫(kù)發(fā)布到npm的完整實(shí)現(xiàn)過(guò)程
工作的時(shí)候總是使用別人的npm包,然而我有時(shí)心底會(huì)好奇自己如何發(fā)布一個(gè)npm包呢,什么時(shí)候自己的包能夠被很多人喜歡并使用呢,下面這篇文章主要給大家介紹了關(guān)于一個(gè)vue組件庫(kù)發(fā)布到npm的相關(guān)資料,需要的朋友可以參考下2022-03-03
在vue中實(shí)現(xiàn)禁止回退上一步,路由不存歷史記錄
這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止回退上一步,路由不存歷史記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
使用Vue快速實(shí)現(xiàn)一個(gè)無(wú)縫輪播效果
這篇文章主要為大家詳細(xì)介紹了如何使用Vue快速實(shí)現(xiàn)一個(gè)無(wú)縫輪播效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-04-04