vue Element-ui 表格多选 修改选中行背景色
实现的效果:
整体思路方式:
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 表格多选 修改选中行背景色的更多相关文章
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 表格自定义样式溢出隐藏
样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
随机推荐
- JAVA 8 新特性实用总JAVA 8 新特性实用总结结
JAVA 8 新特性实用总结 作为一个工作两年多的 老 程序猿,虽然一开始就使用 jdk1.8 作为学习和使用的版本,随着技术的迭代,现有的 JDK 版本从两年前到现在,已经飞速发展到了 JDK 15 ...
- 1071 Speech Patterns——PAT甲级真题
1071 Speech Patterns People often have a preference among synonyms of the same word. For example, so ...
- Google单元测试框架gtest之官方sample笔记1--简单用例
1.0 通用部分 和常见的测试工具一样,gtest提供了单体测试常见的工具和组件.比如判断各种类型的值相等,大于,小于等,管理多个测试的测试组如testsuit下辖testcase,为了方便处理初始化 ...
- 【python3】 解:import导包机制
模块和包 模块:我们定义的.py结尾的文件就是一个模块,模块中通常定义了类.方法.变量等一系列功能: 包:存放模块的文件夹,含有init.py文件,定义path属性. import语句的作用 impo ...
- fastjson 反弹shell
目录 如下文章说得很不详细,只是用于记录我的步骤,初次利用的人,建议找别的博客文章学习. 准备一台公网服务器 cd test python -m SimpleHTTPServer 8888 javac ...
- 为 APK 文件增加右键菜单组实现快捷安装
0.结果 1.需求 迫于每次都要打开 Powershell 手动敲 adb install xxx.apk 太麻烦,就想通过注册表搞一个右键菜单,实现快捷安装 apk 的功能. 最后决定先实现三个功能 ...
- Office2013安装教程(附安装包+激活工具)
office2013中文版是微软推出的新一代office办公软件,重点加强了云服务项目,Office2013[☜借你手指用下]采用了全新的Merto界面,使用户更加专注于内容,配合Windows 8的 ...
- Shiro反序列化<=1.2.4 复现
Apache Shiro是一个Java安全框架,执行身份验证.授权.密码和会话管理. shiro默认使用了CookieRememberMeManager,其处理cookie的流程是:得到reme ...
- vscode动态调试
前言: 关于vscode动态调试php项目其实在网上有文章,但那些文章或多或少都有些坑点或者转载他人,未经验证过,几度重装系统重新配置的时候在网上看文章配置总是有点问题,所以这次自己写了一篇文章,从头 ...
- Codeforces Round #548 C. Edgy Trees
题面: 传送门 题目描述: 给出有n个节点的树,整数k.题目要求找长度为k,符合规则(good序列)的"点序列"(由节点构成的序列)个数有多少?规则如下: 1.走一条出发点为a1, ...