elemnet.ui表格中的全选/单选后当前表格背景色改变

最新推荐文章于 2023-04-28 10:52:37 发布

原创最新推荐文章于 2023-04-28 10:52:37 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html

个人专栏收录该内容

16 篇文章

订阅专栏

本文分享了如何在 Element UI 的表格组件中实现单选和多选行时背景色的变化效果。通过自定义 CSS 和 Vue.js 方法，可以轻松地为选中的行添加醒目的颜色提示。

今天跟大家分享一下elemnet.ui表格中的全选/单选后当前表格背景色改变`

首先是单选：
<el-table
    :data="tableData"  
    highlight-current-row
    style="width: 100%">
</el-table>`

然后直接在公共的css样式中加入

.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #212e3e !important;
}

接下来是多选

<el-table
    :data="tableData"  
   	@select="handleSelectionChange"
    @select-all="handselectall"
     :row-class-name="tableRowClassName"
    style="width: 100%">
</el-table>`

在data中定义一个numbers:[],
// 全选变色
handselectall(val){
	this.handleSelectionChange(val);
},
 handleSelectionChange(row) {
    console.log(row);
	row.forEach((value,index)=>{
		this.numbers.push(value.id);
	})
    },
// 选中背景色
tableRowClassName({ row, rowIndex }) {
  let color = "";
  this.numbers.forEach((r, i) => {
    if (rowIndex === r) {
      color = "warning-row";
    }
  });
  return color;
}
```然后在样式中加入
.warning-row{
background-color: #212e3e !important;
}

完事，有什么可以给我留言，因为我们公司的代码都是复制不出去的，所以又写了一遍。祝各位小伙伴天天好心情哦