简介
本文主要介绍vue table 使用el-table为行添加自定义背景色。
概述
element-ui为开发者简化了极大的前端开发工作，但是过于强力的封装，必然导致可自定义性质的退化，有时会为了一个小功能而花费更长的时间.
此篇介绍如何对element-ui 中的el-table 添加行自定义选中背景色和hover变色效果。
需求由来
vue is very hot in developers recently, i want to learn it all the time.
one week ago, i rebuild my little partner with VUE and learn so much.
but one problem ocuur when i was happing for me ,
it just like a ball hit my head , lost too much time to fix it, so i must remark it today.
the way to fix
为了解决这个问题，在网上看了很多资料，但是都没啥效果，所以还是看官方文档，自己研究吧，功夫不负有心人，DOWN IT！
nothing to say , but code first!
html code
> html 代码
<div class="table-box">
<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%; cursor: pointer;"
@selection-change="handleSelectionChange"
@row-click="rowClick"
@select-all="selectAll"
:row-class-name="tableRowClassName"
@select="singleCheck">
<el-table-column type="selection" label="全选"></el-table-column>
<el-table-column prop="columnDesc" label="备注"></el-table-column>
<el-table-column label="字段名" prop="columnDesc"></el-table-column>
<el-table-column prop="name" label="操作">
<template slot-scope="scope">
<div style="color: #3280d8;">clickMe</div>
</template>
</el-table-column>
</el-table>
</div>data methods
JS代码
export default {
data() {
return {
tableData: [],
multipleSelection: [],
// 用于存放被选中行的index
numbers: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
// 再次调用toggleRowSelection则取消选中
this.$refs.multipleTable.toggleRowSelection(row);
if (this.numbers.indexOf(row.index) == -1) {
console.log("选中" + row.index)
this.numbers.push(row.index);
} else {
console.log("取消选中" + row.index)
this.numbers.splice(this.numbers.indexOf(row.index), 1);
}
})
} else {
this.$refs.multipleTable.clearSelection()
}
},
handleSelectionChange(val) {
this.multipleSelection = val
},
// 单行checkbox选中触发
singleCheck(val, row) {
let index = row.index;
if (this.numbers.indexOf(index) == -1) {
console.log("选中" + index)
this.numbers.push(index);
} else {
console.log("取消选中" + index)
this.numbers.splice(this.numbers.indexOf(index), 1);
}
},
// 全选checkbox点击时触发
selectAll(val, row) {
// 判断是否全选
console.log(this.tableData.length + "-" + this.multipleSelection.length)
if (this.multipleSelection.length >= this.tableData.length) {
// 表单绑定的数据
console.log("全选")
// 所有index放入数组中
this.tableData.forEach((item, i) => {
this.numbers.push(item.index);
});
this.$refs.multipleTable.toggleRowSelection(row);
} else {
console.log("取消全选")
// 清空背景数组
this.numbers.splice(0)
}
},
// 重置所有选中行
resetSelect() {
// 选中的需要取消选中
if (this.numbers.length > 0) {
this.numbers.forEach(index => {
this.$refs.multipleTable.toggleRowSelection(this.tableData[index]);
})
}
// 清空数组
this.numbers.splice(0)
},
// 行点击事件
rowClick(row) {
let index = row.index;
if (this.numbers.indexOf(index) == -1) {
console.log("选中" + index)
this.numbers.push(index);
} else {
console.log("取消选中" + index)
this.numbers.splice(this.numbers.indexOf(index), 1);
}
// 再次点击时，调用toggleRowSelection则取消选中
this.$refs.multipleTable.toggleRowSelection(row);
},
/* 设置选中背景色 */
tableRowClassName({row,rowIndex}) {
// 为每行添加属性index
row.index = rowIndex;
let color = "";
this.numbers.forEach((r, i) => {
if (rowIndex === r) {
// 自定义class名称，需要写到全局element-ui 的scss文件中或者用scoped做穿透
// 本人穿透未成功，所以就没用scoped
color = "myRowClass";
}
});
return color;
}
}
}
css
css 代码
/* 鼠标上移 hover效果 */ .el-table--enable-row-hover .el-table__body tr:hover>td { background-color: #9198e5 !important; font-size: 18px !important; }
/* 选中改变自定义背景色 */
.myRowClass {
// background-color: yellow !important;
// 设置渐变色
background-image: linear-gradient(#4d33280a, #7f87e3) !important;
}
## 效果
> 单击行时，行对应checkbox选中，其背景色会改变;再次单机会取消选中，行背景色变回原来的颜色。
> 全选和当选效果和单击行一样。
> 以下是效果图，已经解决了全选/反选和单击行的效果冲突
[](#总结 "总结")总结
--------------
> element-ui 很好用，但同时，如果要实现一些自定义功能还需要仔细去研究组件源码，后续会继续补充。
