怎么去掉ElementUI?Table的hover變色問題

這篇文章主要講解了“怎么去掉ElementUI Table的hover變色問題”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么去掉ElementUI Table的hover變色問題”吧！

去掉ElementUI Table的hover變色

在自定義Element的時候，有一些自帶特效我們不想要，去掉又不知道怎么去掉。

比如Table的hover變色。

其實方法并不是去掉，而是讓他看起來不變。

開始↓定義單元格背景色：

<el-table
     :cell-
     >

定義單元格hover顏色：

 .el-table tbody tr:hover>td {
            background-color:#f5f5f5 !important
        }

其實就是讓hover顏色跟背景色一樣啊

用函數方法

:cell-

函數方法為

setCellStyle({ row, column, rowIndex, columnIndex }) {
        if (column.label === '當前列表頭的名字') {
          return "background:#e8e8e8;"//可以設置顏色或者邊框
        }
        if (columnIndex === 4) {
          return "background:#e8e8e8;"
        } else {
          return "background:#e8e8e8;"
        }
      }

ElementUI使用table時,取消鼠標點擊、hover對某一行背景顏色變化

在使用ElementUI中的table時，往往會有這樣的需求：針對某種狀態對table表格中的某一行數據進行高亮顯示，但同時又要取消鼠標點擊事件和hover對高亮顯示的行不受影響。

具體的高亮顯示，官網中有文檔介紹：可以通過指定 Table 組件的 row-class-name 屬性來為 Table 中的某一行添加 class，表明該行處于某種狀態。

實例

<el-table v-loading="loading.table" :data="data.list.items" fit :cell- element-loading-text="玩命加載中"
			element-loading-spinner="el-icon-loading" header-cell-class-name="table-header-cell" 
			@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="項目所屬區域" 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對高亮顯示的行影響，我的列表（只作為數據展示）是取消了highlight-current-row 是否要高亮當前行 這個屬性，就正常了。

因為:row-class-name="tableRowClassName"在渲染表格的時候就調用了，不能用來響應點擊事件改變行的顏色。

或者可以給表格增加: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、鼠標點擊事件時讓他們的顏色與背景色一樣就可以.

感謝各位的閱讀，以上就是“怎么去掉ElementUI Table的hover變色問題”的內容了，經過本文的學習后，相信大家對怎么去掉ElementUI Table的hover變色問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！