element ui官网的table多选后的样式如下图
我们想要的效果如下图(选中的是有底色/高亮的)
用到的主要知识点如下图(2张)
为了方便后期修改颜色,我们把样式写在了公共样式中–common.less
//table选中高亮
.el-table .slecleRowColor {
background: #EAF4FF !important;
}
//改变element ui自带的hover高亮颜色
.el-table tbody tr:hover > td {
background-color: #EAF4FF !important;
}
在界面组件中—index.vue
主要代码 :row-class-name="rowClass"
,@selection-change="handleSelectionChange"
html:
<el-table ref="inspectTable"
:data="inspectTable.data"
size="mini"
:row-class-name="rowClass"
@selection-change="handleSelectionChange">
<el-table-column type="selection"
width