实现的效果:

整体思路方式:

  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. JAVA 8 新特性实用总JAVA 8 新特性实用总结结

    JAVA 8 新特性实用总结 作为一个工作两年多的 老 程序猿,虽然一开始就使用 jdk1.8 作为学习和使用的版本,随着技术的迭代,现有的 JDK 版本从两年前到现在,已经飞速发展到了 JDK 15 ...

  2. 1071 Speech Patterns——PAT甲级真题

    1071 Speech Patterns People often have a preference among synonyms of the same word. For example, so ...

  3. Google单元测试框架gtest之官方sample笔记1--简单用例

    1.0 通用部分 和常见的测试工具一样,gtest提供了单体测试常见的工具和组件.比如判断各种类型的值相等,大于,小于等,管理多个测试的测试组如testsuit下辖testcase,为了方便处理初始化 ...

  4. 【python3】 解:import导包机制

    模块和包 模块:我们定义的.py结尾的文件就是一个模块,模块中通常定义了类.方法.变量等一系列功能: 包:存放模块的文件夹,含有init.py文件,定义path属性. import语句的作用 impo ...

  5. fastjson 反弹shell

    目录 如下文章说得很不详细,只是用于记录我的步骤,初次利用的人,建议找别的博客文章学习. 准备一台公网服务器 cd test python -m SimpleHTTPServer 8888 javac ...

  6. 为 APK 文件增加右键菜单组实现快捷安装

    0.结果 1.需求 迫于每次都要打开 Powershell 手动敲 adb install xxx.apk 太麻烦,就想通过注册表搞一个右键菜单,实现快捷安装 apk 的功能. 最后决定先实现三个功能 ...

  7. Office2013安装教程(附安装包+激活工具)

    office2013中文版是微软推出的新一代office办公软件,重点加强了云服务项目,Office2013[☜借你手指用下]采用了全新的Merto界面,使用户更加专注于内容,配合Windows 8的 ...

  8. Shiro反序列化<=1.2.4 复现

    Apache Shiro是一个Java安全框架,执行身份验证.授权.密码和会话管理.    shiro默认使用了CookieRememberMeManager,其处理cookie的流程是:得到reme ...

  9. vscode动态调试

    前言: 关于vscode动态调试php项目其实在网上有文章,但那些文章或多或少都有些坑点或者转载他人,未经验证过,几度重装系统重新配置的时候在网上看文章配置总是有点问题,所以这次自己写了一篇文章,从头 ...

  10. Codeforces Round #548 C. Edgy Trees

    题面: 传送门 题目描述: 给出有n个节点的树,整数k.题目要求找长度为k,符合规则(good序列)的"点序列"(由节点构成的序列)个数有多少?规则如下: 1.走一条出发点为a1, ...