建议4种方法都看一变可以合起来一起使用哦

第一种方法：row-class-name

使用row-class-name时当鼠标悬浮上去时背景将会变色（表格默认）

第二种方法：cell-class-name

使用cell-class-name时鼠标悬浮上去后不会改变背景颜色

第三种方法：（cell-class-name和row-class-name）都可以

可以设置当鼠标悬浮上去后修改样式；这种方法悬浮到没有改变背景的第一行也会改变第一行的背景如

也可以设置不改变第一行，只改变鼠标悬浮到那些红色的上面的表格的背景颜色，见对应代码的样式上注释

第四种方法：既想要vue表格的隔行变色又想根据数据改变对应行的背景颜色

有vue表格的隔行换色，表格的第二行和第四行为深色，在使用上面的方法也改变不了这种深色的表格的背景只能改变那些没有改变背景的表格行如（1，3行的背景）；使用这种方法就可以改变了，现在使用的是表格的隔行换色，也改变了第二行的背景

第一种方法代码

注：row-class-name对应的方法返回的样式值必须在<style></style>中，style不能有其他属性否正不生效

<template><div><el-card shadow="hover"><!-- 表格添加:row-class-name="tableRowClassName"  tableRowClassName对应下面方法 --><el-table @selection-change="handleSelectionChange" border :data="tableData" height="250" :row-class-name="tableRowClassName"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="province" label="省份"></el-table-column><el-table-column prop="city" label="市区"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column prop="zip" label="邮编"></el-table-column></el-table></el-card></div>
</template><script>export default {data() {return {multipleSelection: []tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: false      //背景是否显示为红色}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: false}],}},methods: {//多选handleSelectionChange(val) {this.multipleSelection = val;console.info(this.multipleSelection)},//判断字段属性并修改背景颜色tableRowClassName({row,rowIndex}) {if (row.y) {return 'success-row'} else {return ''}}}}
</script><style>.el-table .success-row {background: red !important;color: #000;}
</style>

第二种方法代码

注：cell-class-name对应的方法返回的样式值必须在<style></style>中，style不能有其他属性否正不生效（跟上个方法比：修改了属性名称和方法名，下面的方法增加了个参数）

<template><div><el-card shadow="hover"><!-- 表格添加:cell-class-name="tableCellClassName"  tableCellClassName对应下面方法 --><el-table @selection-change="handleSelectionChange" border :data="tableData" height="250" :cell-class-name="tableCellClassName"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="province" label="省份"></el-table-column><el-table-column prop="city" label="市区"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column prop="zip" label="邮编"></el-table-column></el-table></el-card></div>
</template><script>export default {data() {return {multipleSelection: []tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: false      //背景是否显示为红色}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: false}],}},methods: {//多选handleSelectionChange(val) {this.multipleSelection = val;console.info(this.multipleSelection)},//判断字段属性并修改背景颜色//tableCellClassName({row,column,rowIndex}) {if (row.y) {return 'success-cell'} else {return ''}}}}
</script><style>.el-table .success-cell {background: red !important;color: #000;}
</style>

第三种方法代码

注：这里使用row-class-name方法，在下方style中添加了个样式！

<template><div><el-card shadow="hover"><el-table @selection-change="handleSelectionChange" border :data="tableData" height="250" :row-class-name="tableRowClassName"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="province" label="省份"></el-table-column><el-table-column prop="city" label="市区"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column prop="zip" label="邮编"></el-table-column></el-table></el-card></div>
</template><script>export default {data() {return {multipleSelection: []tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: false      //背景是否显示为红色}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: false}],}},methods: {//多选handleSelectionChange(val) {this.multipleSelection = val;console.info(this.multipleSelection)},//判断字段属性并修改背景颜色tableRowClassName({row,rowIndex}) {//要是想修改隔行变色的背景颜色判断rowIndex奇偶数即可if (row.y) {return 'success-row'} else {return ''}}}}
</script><style>.el-table .success-row {background: red !important;color: #000;}/*// 如果想要设置只悬浮到红色的背景上才改变背景颜色// 可以将选择器 .el-table tr:hover td // 改为 .el-table tr.success-row:hover td 就可以了.el-table tr.success-row:hover td {background: #0ff !important;color: #000;}*/.el-table tr:hover td {background: #0ff !important;color: #000;}
</style>

第四种方法代码

注：注意下方style中的样式！

<template><div><el-card shadow="hover"><!-- 表格添加隔行换色 stripe --><el-table stripe @selection-change="handleSelectionChange" border :data="tableData" height="250" :row-class-name="tableRowClassName"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="province" label="省份"></el-table-column><el-table-column prop="city" label="市区"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column prop="zip" label="邮编"></el-table-column></el-table></el-card></div>
</template><script>export default {data() {return {multipleSelection: []tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: false      //背景是否显示为红色}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: true}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,y: false}],}},methods: {//多选handleSelectionChange(val) {this.multipleSelection = val;console.info(this.multipleSelection)},//判断字段属性并修改背景颜色tableRowClassName({row,rowIndex}) {if (row.y) {return 'success-row'} else {return ''}}}}
</script><style>
/*
直接改变表格的背景颜色
跟上面的方法比修改了选择器.el-table tr.success-row td
意思是改变表格行中类型为.success-row的行
.success-row来源为上面tableRowClassName方法的返回值
如果返回的是aaa那就是.el-table tr.aaa td
*/.el-table tr.success-row td{background: red !important;color: #000;}.el-table tr:hover td {background: #0ff !important;color: #000;}
</style>

vue表格根据属性值设置背景颜色、vue表格设置鼠标悬浮背景颜色、vue表格的隔行变色修改背景颜色相关推荐

vue echarts x轴文本过长，设置超出隐藏显示省略号，鼠标悬浮上显示全部
1. 原生js版本源码如下: <!DOCTYPE html> <html lang="en"><head><meta charset= ...
html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
vue更改dom属性值之后未及时刷新组件解决方案
1.vue更改dom元素之后延迟执行 this.$nextTick(function(){ ************* }); 2.data体数组增加属性及时更新dom this.$set(改变的数组 ...
Vue学习2 - 事件处理以及绑定、事件、遍历、判断、元素显示、DOM属性的绑定、comput计算属性值
文章目录 1. 事件处理.以及Vue生命周期函数.事件描述符 1.1 基本用法 1.2 获取事件对象,阻止默认行为.事件冒泡行为.事件描述符 2. for循环 2.1 基本数据类型数组的遍历 2.2 ...
HTML之二：body标记的属性及属性值
HTML之二:body标记的属性及属性值在HTML之一中,介绍了必须要写入的结构.title用于显示标题栏的内容.网页的内容大部分在body中编辑,下面简单介绍body常用的属性以及属性值. < ...
CSS 的background-size：cover属性值和contain属性值
1.语法:background-size:length|percentage|cover|contain: 2.参数:参考文章:菜鸟教程 3.浏览器支持: 4.标签定义及使用说明: 5.通常情况下都是 ...
html中display属性是什么意思,HTML中display属性的属性值有哪些
HTML中display属性的属性值有哪些发布时间:2020-09-26 14:35:20 来源:亿速云阅读:102 作者:小新这篇文章主要介绍了HTML中display属性的属性值有哪些,具有 ...
java反射获取Object属性值
项目场景: 一个添加员工信息的功能,通过shiro获取当前登录用户的信息,取出其中的createId的值,在通过set方法写入. 问题描述: 通过获取的登录用户的信息发现,它是一个Object对象,然 ...
jquery 样式获取设置值_jQuery获取样式中的背景颜色属性值/颜色值
天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示#ffff00,而Chrome. ...
java表格怎样设置内间距_如何设置表格的间距和背景等属性
步骤一:在打开的网页文档中选择表格后,在"属性"面板中即可对表格的属性进行设置.首先设置表格的id和行列值. 步骤二:接下来设置表格的宽度和高度."宽"和&qu ...

vue表格根据属性值设置背景颜色、vue表格设置鼠标悬浮背景颜色、vue表格的隔行变色修改背景颜色