如何去掉ElementUI Table的hover變色問題
更新時間：2022年09月13日 16:09:40 作者：EruruI
這篇文章主要介紹了如何去掉ElementUI Table的hover變色問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
去掉ElementUI Table的hover變色
在自定義Element的時候，有一些自帶特效我們不想要，去掉又不知道怎么去掉。
比如Table的hover變色。
其實方法并不是去掉，而是讓他看起來不變。
開始↓定義單元格背景色：
<el-table
?? ? :cell-style="{background:'#f5f5f5'}"
?? ? >定義單元格hover顏色：
?.el-table tbody tr:hover>td {
? ? ? ? ? ? background-color:#f5f5f5 !important
? ? ? ? }其實就是讓hover顏色跟背景色一樣啊
用函數(shù)方法
:cell-style="setCellStyle"
函數(shù)方法為
setCellStyle({ row, column, rowIndex, columnIndex }) {
? ? ? ? if (column.label === '當前列表頭的名字') {
? ? ? ? ? return "background:#e8e8e8;"http://可以設(shè)置顏色或者邊框
? ? ? ? }
? ? ? ? if (columnIndex === 4) {
? ? ? ? ? return "background:#e8e8e8;"
? ? ? ? } else {
? ? ? ? ? return "background:#e8e8e8;"
? ? ? ? }
? ? ? }ElementUI使用table時,取消鼠標點擊、hover對某一行背景顏色變化
在使用ElementUI中的table時，往往會有這樣的需求：針對某種狀態(tài)對table表格中的某一行數(shù)據(jù)進行高亮顯示，但同時又要取消鼠標點擊事件和hover對高亮顯示的行不受影響。
具體的高亮顯示，官網(wǎng)中有文檔介紹：可以通過指定 Table 組件的 row-class-name 屬性來為 Table 中的某一行添加 class，表明該行處于某種狀態(tài)。
實例
<el-table v-loading="loading.table" :data="data.list.items" fit :cell-style="cellStyle" element-loading-text="玩命加載中"
element-loading-spinner="el-icon-loading" header-cell-class-name="table-header-cell" style="width:100%"
@selection-change="handleSelectionChange" border :row-class-name="tableRowClassName">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="項目編號" align="center" prop="id" min-width="100">
</el-table-column>
<el-table-column label="項目名稱" align="center" prop="xmmc" min-width="150">
</el-table-column>
<el-table-column label="計劃開工日期" align="center" prop="jhkgrq" min-width="150">
<template slot-scope="scope">
{{ scope.row.jhkgrq | dateFormart('yyyy-MM-dd') }}
</template>
</el-table-column>
<el-table-column label="計劃竣工日期" align="center" prop="jhjgrq" min-width="150">
<template slot-scope="scope">
{{ scope.row.jhjgrq | dateFormart('yyyy-MM-dd') }}
</template>
</el-table-column>
<el-table-column label="項目地址" align="center" prop="xmwz" min-width="150" :show-overflow-tooltip='true'>
</el-table-column>
<el-table-column label="項目所屬區(qū)域" align="center" prop="qymc" min-width="150">
</el-table-column>
<el-table-column label="是否竣工" align="center" prop="sfjg" min-width="120" :formatter="stateFormat">
</el-table-column>
<el-table-column label="操作" align="center" prop="state" min-width="240">
<template slot-scope="scope">
<el-button icon="el-icon-search" size="mini" type="success" @click="lookHandler(scope.$index, scope.row)">查看
</el-button>
<i v-if="scope.row.sfjg==1">
<el-button icon="el-icon-edit" size="mini" type="success" :disabled="true"
@click="editHandler(scope.$index, scope.row)">
編輯
</el-button>
</i>
<i v-else>
<el-button icon="el-icon-edit" size="mini" type="success" @click="editHandler(scope.$index, scope.row)">
編輯
</el-button>
</i>
</template>
</el-table-column>
</el-table>
顏色標記處理：
tableRowClassName({ row, rowIndex }) {
if (row.sfjg == 1) {
return "success-row";
} else if (row.sfjg == 0) {
return "warning-row";
} else {
return "";
}
},
在全局樣式中定義高亮顏色顯示
/*列表的表頭*/
.table-header-cell {
background-color:#8bd2c2!important;
color: #fff;
font-weight: 400;
}
.el-table .success-row {
background: #ffb707!important;
}
.el-table .warning-row {
background: #def6f6;
}
這樣就完成了某一行的高亮顯示，取消鼠標事件和hover對高亮顯示的行影響，我的列表（只作為數(shù)據(jù)展示）是取消了highlight-current-row 是否要高亮當前行 這個屬性，就正常了。
因為:row-class-name="tableRowClassName"在渲染表格的時候就調(diào)用了，不能用來響應點擊事件改變行的顏色。
或者可以給表格增加:highlight-current-row屬性，高亮顯示當前行，然后通過修改css樣式來改變顏色：
定義響應事件
.el-table__body tr.current-row>td {
background: #ffb707!important;
}
定義hover事件
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #ffb707!important
}
改變不了就融入他們，在hover、鼠標點擊事件時讓他們的顏色與背景色一樣就可以.
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue自定義插件封裝，實現(xiàn)簡易的elementUi的Message和MessageBox的示例
這篇文章主要介紹了vue自定義插件封裝，實現(xiàn)簡易的elementUi的Message和MessageBox的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
如何使用vue-pdf-embed實現(xiàn)PDF在線預覽
vue-pdf-embed是一個基于Vue.js的插件,專門用于在Vue應用中嵌入和展示PDF文件,本文將使用vue-pdf-embed實現(xiàn)PDF在線預覽功能,有需要的小伙伴可以參考一下2025-03-03
這篇文章主要給大家分享關(guān)于Vue 購物車案例的小練習，文章個悲劇購物車為標題需求利用HTML代碼實現(xiàn)整個過程,需要的朋友可以參考一下文章的具體內(nèi)容2021-10-10
Vue本來無需操作DOM來更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點的3種方式,需要的朋友可以參考下2023-02-02
本文主要介紹了M1 pro芯片啟動Vue項目的方法步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了開啟Vue項目缺少node_models包的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在Vue項目中集成CryptoJS進行數(shù)據(jù)加密,首先需要通過npm安裝CryptoJS安裝包,然后在項目文件中引入CryptoJS,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
Vue?Router?返回后記住滾動條位置的實現(xiàn)方法
使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求：首頁是列表頁,點擊列表項進入詳情頁,在詳情頁點擊返回首頁后,希望看到的是,首頁不刷新,并且滾動條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動條位置的實現(xiàn)方法,需要的朋友可以參考下2023-09-09
Vue全局注冊中的kebab-case和PascalCase用法
這篇文章主要介紹了Vue全局注冊中的kebab-case和PascalCase用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
provide和inject主要為高階插件/組件庫提供用例,并不推薦直接用于應用程序代碼中,下面這篇文章主要給大家介紹了關(guān)于Vue中provide、inject詳解以及使用的相關(guān)資料,需要的朋友可以參考下2022-11-11