vue表格根据属性值设置背景颜色、vue表格设置鼠标悬浮背景颜色
vue表格根据属性值设置背景颜色、vue表格设置鼠标悬浮背景颜色
- 第一种方法：row-class-name
- 第二种方法：cell-class-name
- 第三种方法：（cell-class-name和row-class-name）都可以
- 第一种方法代码
- 第二种方法代码
- 第三种方法代码
第一种方法：row-class-name
使用row-class-name时当鼠标悬浮上去时背景将会变色（表格默认）
第二种方法：cell-class-name
使用cell-class-name时鼠标悬浮上去后不会改变背景颜色
第三种方法：（cell-class-name和row-class-name）都可以
可以设置当鼠标悬浮上去后修改样式
第一种方法代码
注：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
}) {
if (row.y) {
return 'success-row'
} else {
return ''
}
}
}
}
script>
<style>
.el-table .success-row {
background: red !important;
color: #000;
}
style>
第二种方法代码
注：cell-class-name对应的方法返回的样式值必须在中，style不能有其他属性否正不生效（跟上个方法比：修改了属性名称和方法名，下面的方法增加了个参数）
<template>
<div>
<el-card shadow="hover">
<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
}) {
if (row.y) {
return 'success-row'
} else {
return ''
}
}
}
}
script>
<style>
.el-table .success-row {
background: red !important;
color: #000;
}
.el-table tr:hover td {
background: #0ff !important;
color: #000;
}
style>