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
随机推荐
- Linux文件/proc/net/tcp分析
本文转载自Linux文件/proc/net/tcp分析 导语 /proc/net/tcp文件提供了tcp的连接信息,是由net/ipv4/tcp_ipv4.c中的tcp4_seq_show()实现信息 ...
- banner自用图床
放些常用的图做图床,也不在别的平台用.
- servlet内置对象(传递数据)
一个servlet向另一个servlet发送数据,可以将数据放置在一个容器中(io.数据库.servlet的内置对象),servlet的内置对象成本最小. 一共有三个内置对象. 名字 类型 reque ...
- 第42天学习打卡(Class类 Class类的常用方法 内存分析 类的加载过程 类加载器 反射操作泛型 反射操作注解)
Class类 对象照镜子后得到的信息:某个类的属性.方法和构造器.某个类到底实现了哪些接口.对于每个类而言,JRE都为其保留一个不变的Class类型的对象.一个Class对象包含了特定某个结构(cla ...
- 《PYTHON机器学习及实践-从零开始通往KAGGLE竞赛之路》 分享下载
转: <PYTHON机器学习及实践-从零开始通往KAGGLE竞赛之路> 分享下载 书籍信息 书名: PYTHON机器学习及实践-从零开始通往KAGGLE竞赛之路 标签: PYTHON机器学 ...
- java内存区域的划分
前言 之前我们探讨过一个.class文件是如何被加载到jvm中的.但是jvm内又是如何划分内存的呢?这个内被加载到了那一块内存中?jvm内存划分也是面试当中必被问到的一个面试题. 什么是JVM内存区域 ...
- 通过穷举法快速破解excel或word加密文档最高15位密码
1.打开文件 2.工具 --- 宏 ---- 录制新宏 --- 输入名字如 :aa 3.停止录制 ( 这样得到一个空宏 ) 4.工具 --- 宏 ---- 宏 , 选 aa, 点编辑按钮 5.删除窗口 ...
- Java 常见对象 04
常见对象·Arrays 类和 包装类 数组高级冒泡排序原理图解 * A:画图演示 * 需求: 数组元素:{24, 69, 80, 57, 13} 请对数组元素进行排序 * 冒泡排序: 相邻元素两两比较 ...
- 2020年12月-第02阶段-前端基础-Day06
CSS Day06 定位(position) 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布 ...
- WPF 应用 - 图表 LiveCharts
引用:LiveCharts,LiveCharts.Wpf 1. 示例 折线图 <Window ... xmlns:lvc="clr-namespace:LiveCharts.Wpf;a ...