vue2项目需要使用element ui table的功能,但是需要修改样式,这里将实现方式记录下来。
<div class="table-container-case">
<el-table
ref="singleTable"
:data="list"
border
height="100%"
@row-click="handleRowClick"
:row-class-name="tableRowClassName"
style="width: 100%">
<el-table-column
type="index"
label="name"
width="60"
align="center">
<template slot-scope="scope">
<div style="color: #FFB832;">{{ scope.$index + 1 }}</div>
</template>
</el-table-column>
<el-table-column
property="cbr"
align="center"
label="name2">
</el-table-column>
<el-table-column
property="zw"
align="center"
label="name3">
</el-table-column>
<el-table-column
property="num"
align="center"
label="name4">
</el-table-column>
</el-table>
</div>
点击表格高亮并获取数据
handleRowClick(row, event) {
this.currentRow = row
this.updateJudgeId(row.judge_id)
console.log('点击的行数据:', row);
},
tableRowClassName({row, rowIndex}) {
if (row === this.currentRow) {
return 'highlight-row';
}
return '';
},
css样式
<style lang="less" scoped>
.table-container-case {
padding: 20px;
box-sizing: border-box;
position: relative;
height: 100%;
}
</style>
<style lang="less">
.table-container-case {
.el-table, .el-table__expanded-cell {
background-color: rgba(0, 0, 0, 0) !important;
}
.el-table th.el-table__cell {
background-color: rgba(0, 0, 0, 0) !important;
}
.el-table tr {
background-color: rgba(0, 0, 0, 0) !important;
}
.el-table .el-table__cell {
}
.el-table thead {
background: #285a9a;
}
.el-table--border, .el-table--group {
border: 1px solid #2b578f;
}
.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
border-bottom: 1px solid #2b578f;
border-right: 1px solid #2b578f;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
background-color: #2b578f;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #2b578f;
}
.el-table th.el-table__cell > .cell {
font-size: 14px;
font-family: MicrosoftYaHeiSemibold;
color: #FFFFFF;
}
.el-table {
color: #FFFFFF;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #2d77b4 !important;
}
.el-table tr.highlight-row {
background-color: #2d78b5 !important; /* 你的高亮颜色 */
}
}
</style>