欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何去掉ElementUI Table的hover變色問題

 更新時(shí)間：2022年09月13日 16:09:40   作者：EruruI  
這篇文章主要介紹了如何去掉ElementUI Table的hover變色問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

去掉ElementUI Table的hover變色

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

比如Table的hover變色。

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

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

<el-table
?? ? :cell-style="{background:'#f5f5f5'}"
?? ? >

定義單元格hover顏色：

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

其實(shí)就是讓hover顏色跟背景色一樣啊

用函數(shù)方法

:cell-style="setCellStyle"

函數(shù)方法為

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

ElementUI使用table時(shí),取消鼠標(biāo)點(diǎn)擊、hover對某一行背景顏色變化

在使用ElementUI中的table時(shí)，往往會(huì)有這樣的需求：針對某種狀態(tài)對table表格中的某一行數(shù)據(jù)進(jìn)行高亮顯示，但同時(shí)又要取消鼠標(biāo)點(diǎn)擊事件和hover對高亮顯示的行不受影響。

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

在這里插入圖片描述

實(shí)例

<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="項(xiàng)目編號(hào)" align="center" prop="id" min-width="100">
			</el-table-column>
			<el-table-column label="項(xiàng)目名稱" align="center" prop="xmmc" min-width="150">
			</el-table-column>
			<el-table-column label="計(jì)劃開工日期" 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="計(jì)劃竣工日期" 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="項(xiàng)目地址" align="center" prop="xmwz" min-width="150" :show-overflow-tooltip='true'>
			</el-table-column>
			<el-table-column label="項(xiàng)目所屬區(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>

顏色標(biāo)記處理：

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;
}

這樣就完成了某一行的高亮顯示，取消鼠標(biāo)事件和hover對高亮顯示的行影響，我的列表（只作為數(shù)據(jù)展示）是取消了highlight-current-row 是否要高亮當(dāng)前行 這個(gè)屬性，就正常了。

因?yàn)?row-class-name="tableRowClassName"在渲染表格的時(shí)候就調(diào)用了，不能用來響應(yīng)點(diǎn)擊事件改變行的顏色。

或者可以給表格增加:highlight-current-row屬性，高亮顯示當(dāng)前行，然后通過修改css樣式來改變顏色：

定義響應(yīng)事件

.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、鼠標(biāo)點(diǎn)擊事件時(shí)讓他們的顏色與背景色一樣就可以.

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論