el-table点击某一行高亮并显示小圆点怎么实现

本文小编为大家详细介绍“el-table点击某一行高亮并显示小圆点怎么实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“el-table点击某一行高亮并显示小圆点怎么实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

<el-table
                                height="93%"
                                :header-cell-
                                :data="tableData1"
                                tooltip-effect="dark"
                                @row-click="clickDetailsFun"
                                :row-class-name="tableRowClassName"
                                :row-
                                highlight-current-row     //高亮设置
                                >
                            <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="个数">
                            </el-table-column>
                        </el-table>

js部分

tableRowClassName({ row, rowIndex }) {
                row.rowIndex = rowIndex;
            },
selectedRowStyle({ row, rowIndex }) {     //关键代码
    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;
}
//圆点样式
.dis{
    border-radius: 100px;
     width:10px; 
     height:10px; 
     background:#39C178;
}
.dis2{
    display: none;
}

效果

读到这里，这篇“el-table点击某一行高亮并显示小圆点怎么实现”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。