el-table表格点击行实现行添加背景，再次点击取消背景。可以多次记录每次点击的行，且能实现有复选框的表格选中同时实现此功能。

需要用到elementui表格的 1，行样式添加的事件 tableRowClassName ；2，行点击事件 rowClick；3，如果表格有复选框还需要用到复选框选择事件 select。

直接干代码：

1.页面组件***.vue

<template>
    <div>
        <el-table :data="tableData" style="width: 100%" :row-key="getRowKey" :row-class-name="tableRowClassName" :stripe="false" @select="handleSelect" @row-click="rowClick">
            <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
            <el-table-column prop="name" label="用户名" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="账号" min-width="180">
            </el-table-column>
            <el-table-column prop="address" label="角色" min-width="220"></el-table-column>
            <el-table-column label="操作" fixed="right" min-width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click.stop="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {
        rowClickBg,
        detailClassName
    } from "./clickRow";  //引入封装好的方法。rowClickBg点击行改变背景颜色，detailClassName添加或去除样式class类名
    export default {
        data() {
            return {
                tableData: [{
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎1',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎2',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎3',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎4',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],

                checkData: [],  //多选选中的数据
                elementIds: [], //定义变量暂存点击行的数据，实现多行点击选中。注意：换页需要清空数组
            }
        },
        methods: {
            //表格复选行唯一
            getRowKey(row) {
                return row.id;
            },
            //操作的按钮
            handleEdit() {},
            handleDelete() {},

            //选中复选框
            handleSelect(select, row) {
                this.checkData = select; //选中的数据
                this.rowClick(row, this.checkData);
            },
            //点击行
            rowClick(row, checkData) {
                let param = rowClickBg(row, this.tableData, this.elementIds, checkData);
                this.elementIds = param.elementIds;
                this.tableData = param.tableData;
            },
            //添加类名
            tableRowClassName({
                row
            }) { //添加类名
                return detailClassName(row)
            }
        }
    }
</script>
<style>
    /* 设置点击行的效果 */
    .el-table .success-row {
        background: #f0f9eb !important;
    }
</style>

2.上面代码中引入的 clickRow.js。可以直接copy修改使用。

/** 
 * row点击的行数据；
 * tableData表格的全部数据；
 * elementIds暂存点击到的行数据id，目的实现可以选中多行变色
 * checkData表格存在多选复选框时，选中的数据，目的：防止取消选中时去除了背景添加
 */
export function rowClickBg(row, tableData, elementIds, checkData) {
    // 注意必须是使用两次深拷贝 因为 selectBg 属性不是tableData原有的 则直接修改无效  所以两次深拷贝重新赋值
    let Arr = JSON.parse(JSON.stringify(tableData))
    for (let index = 0; index < Arr.length; index++) {
        const element = Arr[index]
        // 当选中checkbox,行不存在背景时取消checked选中 —— 取消checked,不触发背景选中
        if (element.id == row.id && !element['selectBg']) {
            if (Array.isArray(checkData) && checkData.findIndex(item => item.id === row.id) === -1) {
                element['selectBg'] = false;
                elementIds.splice(elementIds.findIndex(item => item === row.id), 1); //删除点击行的数据，实现选中行再次点击取消选中
                return {
                    elementIds: elementIds,
                    tableData: tableData
                };
            }
        }

        //当正常情况下选中checkbox和行时选中或取消背景选中
        if (element.id == row.id && element['selectBg']) { //当点击的数据的selectBg字段为真时，就取消当前选中
            if (Array.isArray(checkData) && checkData.findIndex(item => item.id === row.id) >= 0) {
                return {
                    elementIds: elementIds,
                    tableData: tableData
                };
            }
            element['selectBg'] = false;
            elementIds.splice(elementIds.findIndex(item => item === row.id), 1); //删除点击行的数据，实现选中行再次点击取消选中
        } else { //当点击的数据的selectBg字段为假时，就标记当前选中
            if (element.id == row.id || elementIds.some(item => item === element.id)) {
                elementIds.push(element.id); //暂存点击行的数据，实现多行点击选中
                element['selectBg'] = true;
            } else {
                element['selectBg'] = false
            }
        }
    }
    return {
        elementIds: Array.from(new Set(elementIds)),
        tableData: JSON.parse(JSON.stringify(Arr))
    };
}

/** 
 * row点击的行数据；
 * success-row 选中的行背景样式class名
 */
export function detailClassName(row) {
    // 行的 className 的回调方法，为 Table 中的某一行添加 class，表明该行处于某种状态。
    if (row.selectBg) {
        return 'success-row'
    } else {
        return ''
    }
}