el-table/avue-crud统一设置鼠标选中和经过背景色变化

效果图:
首先是关于鼠标经过背景色改变的修改

1.所有页面鼠标经过样式修改(style下common文件中):

//  表格经过
.el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: #c8e2f7 !important;
}

2.avue-crud的样式:

 .el-table__body .el-table__row.hover-row td {
  background-color:#c8e2f7!important;
} 

表格选中背景色改变

1.首先在main.js中挂载公共方法

// 单击选中背景色
Vue.prototype.$rowStyle = function (row, selected) {
  if (!selected.length)  return  { 'background-color': '#fff' }
  const arr = selected.map(item => item.id)
  if ( arr.includes(row.id)) {
    return  { 'background-color': '#cad7f7' }
  } 
}

2.在表格中使用
选中行样式以及单击选中的实现,selectionList当前表格选中数据

 :row-style="({ row }) => $rowStyle(row, selectionList)"
 @row-click="(row)=> $refs.crud.toggleRowSelection(row)"