实现的效果:

整体思路方式:

  1、给获取到的数据添加自定义的className

  2、在点击行(row-click)和手动点击勾选框的事件(select-all)中获取到当前的row的className,直接修改className即可  点击查看事件说明

  3、在行的 className 的回调方法中(row-class-name)直接返回className

  注:还有另一种方式通过获取row进行循环,判断当前点击row的id或者index与数据的是否相等,然后存放点击后的row到新的数组中,这种方式因为触及到遍历。当我有500行数据或者很多行数据,可想而知这里要遍历多少次,还有另一个就是连续点行的颜色发生变化会有延迟,相对来说性能就不好了。

步骤如下:

  1、给数据添加自定义className, 由于这里演示的是本地数据,是直接添加的className; 真实开发是通过接口去加载数据,获取到的数据 直接遍历 赋值就可以,后面就不用管遍历了

data() {
return {
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-06",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
],
multipleSelection: [],
};

  2、点击行和点击勾选框的事件

methods: {

  //点击行触发,切换复选框状态
handleRowClick(row) {
this.$refs.multipleTable.toggleRowSelection(row);
if (row.className === "normal") {
row.className = "tableSelectedRowBgColor";
} else {
row.className = "normal";
}
}, // 手动点击勾选框触发的事件
handleSelect(selection, row) {
// selection,row 传递两个参数,row直接是对象
// 只传一个参数得到的是数组
if (row.className === "normal") {
row.className = "tableSelectedRowBgColor";
} else {
row.className = "normal";
}
}, }

  3、className的回调方法

methods: {
// 选中背景色
tableRowClassName({ row }) {
return row.className;
},
}

  4、最后不要忘了写颜色类名喔

<style>
.tableSelectedRowBgColor td {
background-color: #fedcbd !important;
}
</style>

  完整代码:

<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@row-click="handleRowClick"
@select="handleSelect"
:row-class-name="tableRowClassName"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
</template> <script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-06",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
{
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
className: "normal",
},
],
};
},
methods: {
// 手动点击勾选框触发的事件
handleSelect(selection, row) {
// selection,row 传递两个参数,row直接是对象
// 只传一个参数得到的是数组
if (row.className === "normal") {
row.className = "tableSelectedRowBgColor";
} else {
row.className = "normal";
}
}, // 选中背景色
tableRowClassName({ row }) {
return row.className;
}, //点击行触发,切换复选框状态
handleRowClick(row) {
this.$refs.multipleTable.toggleRowSelection(row);
if (row.className === "normal") {
row.className = "tableSelectedRowBgColor";
} else {
row.className = "normal";
}
},
},
};
</script> <style>
.tableSelectedRowBgColor td {
background-color: #fedcbd !important;
}
</style>

vue Element-ui 表格多选 修改选中行背景色的更多相关文章

  1. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  2. vue+element ui 表格自定义样式溢出隐藏

    样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...

  3. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  4. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  5. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  6. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  7. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  8. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  9. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  10. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

随机推荐

  1. Linux文件/proc/net/tcp分析

    本文转载自Linux文件/proc/net/tcp分析 导语 /proc/net/tcp文件提供了tcp的连接信息,是由net/ipv4/tcp_ipv4.c中的tcp4_seq_show()实现信息 ...

  2. banner自用图床

    放些常用的图做图床,也不在别的平台用.

  3. servlet内置对象(传递数据)

    一个servlet向另一个servlet发送数据,可以将数据放置在一个容器中(io.数据库.servlet的内置对象),servlet的内置对象成本最小. 一共有三个内置对象. 名字 类型 reque ...

  4. 第42天学习打卡(Class类 Class类的常用方法 内存分析 类的加载过程 类加载器 反射操作泛型 反射操作注解)

    Class类 对象照镜子后得到的信息:某个类的属性.方法和构造器.某个类到底实现了哪些接口.对于每个类而言,JRE都为其保留一个不变的Class类型的对象.一个Class对象包含了特定某个结构(cla ...

  5. 《PYTHON机器学习及实践-从零开始通往KAGGLE竞赛之路》 分享下载

    转: <PYTHON机器学习及实践-从零开始通往KAGGLE竞赛之路> 分享下载 书籍信息 书名: PYTHON机器学习及实践-从零开始通往KAGGLE竞赛之路 标签: PYTHON机器学 ...

  6. java内存区域的划分

    前言 之前我们探讨过一个.class文件是如何被加载到jvm中的.但是jvm内又是如何划分内存的呢?这个内被加载到了那一块内存中?jvm内存划分也是面试当中必被问到的一个面试题. 什么是JVM内存区域 ...

  7. 通过穷举法快速破解excel或word加密文档最高15位密码

    1.打开文件 2.工具 --- 宏 ---- 录制新宏 --- 输入名字如 :aa 3.停止录制 ( 这样得到一个空宏 ) 4.工具 --- 宏 ---- 宏 , 选 aa, 点编辑按钮 5.删除窗口 ...

  8. Java 常见对象 04

    常见对象·Arrays 类和 包装类 数组高级冒泡排序原理图解 * A:画图演示 * 需求: 数组元素:{24, 69, 80, 57, 13} 请对数组元素进行排序 * 冒泡排序: 相邻元素两两比较 ...

  9. 2020年12月-第02阶段-前端基础-Day06

    CSS Day06 定位(position) 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布 ...

  10. WPF 应用 - 图表 LiveCharts

    引用:LiveCharts,LiveCharts.Wpf 1. 示例 折线图 <Window ... xmlns:lvc="clr-namespace:LiveCharts.Wpf;a ...