el-table點(diǎn)擊某一行高亮并顯示小圓點(diǎn)的實(shí)現(xiàn)代碼
<el-table height="93%" :header-cell-style="{background:'#E5EBF1',color:'#517085'}" :data="tableData1" tooltip-effect="dark" @row-click="clickDetailsFun" :row-class-name="tableRowClassName" :row-style="selectedRowStyle" highlight-current-row //高亮設(shè)置 style="width: 100%"> <el-table-column width="30"> <template slot-scope="scope"> <div :id="scope.$index"></div> </template> </el-table-column> <el-table-column prop="name" label="電壓范圍"> </el-table-column> <el-table-column prop="value" label="個(gè)數(shù)"> </el-table-column> </el-table>
js部分
tableRowClassName({ row, rowIndex }) { row.rowIndex = rowIndex; }, selectedRowStyle({ row, rowIndex }) { //關(guān)鍵代碼 if (this.getRowIndex === rowIndex) { document.getElementById(rowIndex).className = "dis" }else{ if(document.getElementById(rowIndex)){ document.getElementById(rowIndex).className = "dis2" } } }, clickDetailsFun(val){ this.getRowIndex = val.rowIndex; }
css
//高亮 /deep/.el-table__body tr.current-row>td{ background-color: #d7f3e4 !important; } //圓點(diǎn)樣式 .dis{ border-radius: 100px; width:10px; height:10px; background:#39C178; } .dis2{ display: none; }
效果
到此這篇關(guān)于el-table點(diǎn)擊某一行高亮并顯示小圓點(diǎn)的文章就介紹到這了,更多相關(guān)el-table點(diǎn)擊高亮顯示小圓點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Vant的基礎(chǔ)上實(shí)現(xiàn)添加表單驗(yàn)證框架的方法示例
這篇文章主要介紹了在Vant的基礎(chǔ)上實(shí)現(xiàn)添加驗(yàn)證框架的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12elementui 開始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui 開始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼,需要先在main.js中導(dǎo)入相應(yīng)代碼,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2024-02-02vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vant的Loading加載動(dòng)畫組件的使用(通過接口拿數(shù)據(jù)時(shí)顯示加載狀態(tài))
這篇文章主要介紹了vant的Loading加載動(dòng)畫組件的使用,通過接口拿數(shù)據(jù)時(shí)顯示加載狀態(tài),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01vue項(xiàng)目登錄頁(yè)面實(shí)現(xiàn)記住用戶名和密碼的示例代碼
本文主要介紹了vue項(xiàng)目登錄頁(yè)面實(shí)現(xiàn)記住用戶名和密碼的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07建立和維護(hù)大型 Vue.js 項(xiàng)目的 10 個(gè)最佳實(shí)踐
這篇文章小編要與大家分享的是建立和維護(hù)大型 Vue.js 項(xiàng)目的 10 個(gè)最佳實(shí)踐,需要的小伙伴請(qǐng)和小編一起學(xué)習(xí)下面文章的具體內(nèi)容吧2021-09-09在vue中解決提示警告 for循環(huán)報(bào)錯(cuò)的方法
今天小編就為大家分享一篇在vue中解決提示警告 for循環(huán)報(bào)錯(cuò)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用
這篇文章主要為大家介紹了Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Vue簡(jiǎn)單封裝axios之解決post請(qǐng)求后端接收不到參數(shù)問題
這篇文章主要介紹了Vue簡(jiǎn)單封裝axios之解決post請(qǐng)求后端接收不到參數(shù)問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02