el-table 点击行更改背景颜色_el-table背景颜色

elementUI 中 table 点击行更改背景颜色

========= 鼠标移入时行背景颜色更改  ==========
/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table__body tr:hover > td {
   background-color: pink !important;
  // color: dodgerblue;  /* 设置文字颜色，可以选择不设置 */
}

注意：设置鼠标点击更改颜色，
必须要将el-table 设置高亮 highlight-current-row 不然就不会生效

======= 鼠标点击选择，更改某行颜色  =========
/* 用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row > td {
    background-color: #add8e6 !important;
    // color: coral; /* 设置文字颜色，可以选择不设置 */
}

======= 点击获取某行所有数据 =======
el-table 中添加 @row-click="rowclick"
rowclick(row) {
  console.log("点击获取某一行数据 row -》", row);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22