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