<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>
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,document,rowIndex,getElementById,table,小圆点,row From: https://www.cnblogs.com/qq1622397549/p/16616821.html