el-table點(diǎn)擊某一行高亮并顯示小圓點(diǎn)的實(shí)現(xiàn)代碼

更新時(shí)間：2022年08月23日 16:59:11 作者：你猜我為啥禿頭

這篇文章主要介紹了el-table點(diǎn)擊某一行高亮并顯示小圓點(diǎn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

<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)文章

vue如何使用外部特殊字體的操作
這篇文章主要介紹了vue如何使用外部特殊字體的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue + ts實(shí)現(xiàn)輪播插件的示例
這篇文章主要介紹了Vue + ts實(shí)現(xiàn)輪播插件的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11
如何在vue中使用jsx語(yǔ)法
本文主要介紹了如何在vue中使用jsx語(yǔ)法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue項(xiàng)目中的public、static及指定不編譯文件問題
這篇文章主要介紹了vue項(xiàng)目中的public、static及指定不編譯文件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue Element前端應(yīng)用開發(fā)之菜單資源管理
在權(quán)限管理系統(tǒng)中，菜單也屬于權(quán)限控制的一個(gè)資源，屬于角色控制的一環(huán)。不同角色用戶，登錄系統(tǒng)后，出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合，實(shí)現(xiàn)可訪問路由的過濾，也就實(shí)現(xiàn)了對(duì)應(yīng)角色菜單的展示和可訪問路由的控制。
2021-05-05
Vue動(dòng)態(tài)樣式綁定實(shí)例詳解
眾所周知vue是操作dom元素的,那么如果有元素要?jiǎng)討B(tài)綁定樣式,這種需求,還是要通過改變數(shù)據(jù)來改變視圖的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式綁定的相關(guān)資料,需要的朋友可以參考下
2023-04-04
解決IE11 vue +webpack 項(xiàng)目中數(shù)據(jù)更新后頁(yè)面沒有刷新的問題
今天小編就為大家分享一篇解決IE11 vue +webpack 項(xiàng)目中數(shù)據(jù)更新后頁(yè)面沒有刷新的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法
這篇文章主要介紹了在Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
Vue3使用echarts tree高度自適應(yīng)支持滾動(dòng)查看功能
這篇文章主要介紹了Vue3使用echarts tree高度自適應(yīng)支持滾動(dòng)查看功能,文章同通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
2024-06-06
Vue3中如何使用v-model高級(jí)用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級(jí)用法參數(shù)綁定傳值的相關(guān)知識(shí),包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-10-10