vue2+element?ui?中的el-table?選中當前行當前行變色的實現(xiàn)代碼
vue2+element ui 中的el-table 選中當前行當前行變色

<el-table class="eltable" ref="multipleTable" :data="tableData" style="margin-top: 50px;width: 100%;"
:row-class-name="tableRowClassName" @row-click="rowClick">
<el-table-column v-for="(item, index) in tableTitleList" :label="item.name" :key="index"
:prop="item.prop" :width="item.width" align="center">
</el-table-column>
</el-table>方法:
rowClick(row, column, event) {
console.log(row,column);
this.selectIndex = row.index;
},
// 行選中樣式
tableRowClassName({
row,
rowIndex
}) {
row.index = rowIndex
if (rowIndex == this.selectIndex) {
return 'success-row';
}
},樣式:
::v-deep .success-row {
background-color: #81D3F8 !important;
}補充:Vue+ELement UI el-table移入或選中某行時改變顏色
Vue+ELement UI el-table移入或選中某行時改變顏色
起因
出庫按鈕 置灰時,鼠標移入到表格的某行時,行背景顏色與按鈕背景顏色會被覆蓋住
最初顏色

實現(xiàn)效果
修改行背景顏色

<style>
/* 用來設置當前頁面element全局table 選中某行時的背景色*/
.el-table__body tr.current-row>td{
background-color: #92cbf1!important;
color: #fff;
}
/*鼠標移入某行時的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #454545 !important;
/* color: #fff; */
}
</style>到此這篇關于vue2+element ui 中的el-table 選中當前行當前行變色的文章就介紹到這了,更多相關vue2 element ui el-table 選中當前行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- Vue2+Element-ui實現(xiàn)el-table表格自適應高度的案例
- vue2+elementui的el-table固定列會遮住橫向滾動條及錯位問題解決方案
- Vue2 Element el-table多選表格控制選取的思路解讀
- VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
- VUE2.0 ElementUI2.0表格el-table自適應高度的實現(xiàn)方法
- vue2.0 + element UI 中 el-table 數(shù)據(jù)導出Excel的方法
- vue2使用el-tag實現(xiàn)自定義菜單導航標簽
- vue2實現(xiàn)在el-table里插入el-tag的示例代碼
相關文章
vue關于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式
這篇文章主要介紹了vue關于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue v-for中:key中item.id與Index使用的區(qū)別解析
這篇文章主要介紹了Vue v-for中:key中item.id與Index使用的區(qū)別解析,推薦使用【:key="item.id"】而不是將數(shù)組下標當做唯一標識,前者能做到全部復用,本文給大家詳細講解,感興趣的朋友跟隨小編一起看看吧2024-02-02
Unocss(原子化css)?使用及vue3?+?vite?+?ts講解
這篇文章主要介紹了Unocss(原子化css)使用vue3?+?vite?+?ts的方法,簡單介紹了Unocss使用及圖標庫使用,通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-11-11
Vue實現(xiàn)類似Spring官網(wǎng)圖片滑動效果方法
這篇文章主要介紹了Vue實現(xiàn)類似Spring官網(wǎng)圖片滑動效果方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
前端elementUI?select選擇器實現(xiàn)遠程搜索
這篇文章主要為大家介紹了前端使用elementUI?select選擇器實現(xiàn)遠程搜索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-05-05
解決vue net :ERR_CONNECTION_REFUSED報錯問題
這篇文章主要介紹了解決vue net :ERR_CONNECTION_REFUSED報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08

