el-table点击某一行高亮并显示小圆点的实现代码

<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     //高亮设置

                                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="个数">

                            </el-table-column>

                        </el-table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

//高亮

/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;

}