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点击某一行高亮并显示小圆点的文章就介绍到这了,更多相关el-table点击高亮显示小圆点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！