<el-table
:data="tableData"
border
:max-height="200"
:style="{
borderColor: showPanelTableStyle.borderColor,
width: `210px`,
}"
:cell-style="{
borderColor: showPanelTableStyle.borderColor,
fontFamily: showPanelTableStyle.cellFontFamily,
fontSize: `${showPanelTableStyle.cellFontSize}px`,
color: showPanelTableStyle.cellFontColor,
backgroundColor: showPanelTableStyle.cellBgColor,
padding: 0,
height: `40px`,
}"
:header-cell-style="{
borderColor: showPanelTableStyle.borderColor,
fontFamily: showPanelTableStyle.headerFontFamily,
fontSize: `${showPanelTableStyle.headerFontSize}px`,
color: showPanelTableStyle.headerFontColor,
backgroundColor: showPanelTableStyle.headerBgColor,
padding: 0,
height: '40px',
}"
:row-class-name="tableRowClassName"
@row-click="onRowHandler($event)"
>
</el-table>
:row-class-name="tableRowClassName"
tableRowClassName({ row, rowIndex }) {
if (!this.vueData) return;
// 当前选中行id 与 表格的各行比较
if (this.vueData.currentDataId == row.id) {
return "success-row";
}
return "";
},
.success-row {
background: #0c90b8;
}
el-table鼠标经过,行样式
.el-table tbody tr:hover>td {
background-color:rgba(220, 220, 220, 0.2)!important;
color:#000
}