vue table 使用el-table为行添加自定义背景色

---

简介

本文主要介绍vue table 使用el-table为行添加自定义背景色。

概述

element-ui为开发者简化了极大的前端开发工作，但是过于强力的封装，必然导致可自定义性质的退化，有时会为了一个小功能而花费更长的时间.
此篇介绍如何对element-ui 中的el-table 添加行自定义选中背景色和hover变色效果。
效果图

element-ui.jpg

需求由来

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 代码

        
            
            
            
            
                
            
        
    

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.jpg

总结

element-ui 很好用，但同时，如果要实现一些自定义功能还需要仔细去研究组件源码，后续会继续补充。