亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何去掉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://可以設置顏色或者邊框
? ? ? ? }
? ? ? ? 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"在渲染表格的時候就調用了，不能用來響應點擊事件改變行的顏色。

或者可以給表格增加: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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論