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

最新推荐文章于 2024-09-26 10:14:34 发布

Muchen灬

最新推荐文章于 2024-09-26 10:14:34 发布

阅读量4.2k

点赞数 4

分类专栏： ElementUI 文章标签： elementui

本文链接：https://blog.csdn.net/qq_40976321/article/details/119599017

版权

ElementUI 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何在Element UI中使用CSS实现table行的鼠标悬停效果、点击高亮及获取行数据的方法，包括设置hover背景色、选中行颜色，并配合组件属性`highlight-current-row`。

摘要由CSDN通过智能技术生成

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);
},