element ui表格多选修改背景色

<el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-class-name="selectRowClassName"
        @row-click="rowClickSelect"
        @selection-change="handleSelectionChange">
    <el-table-column
         	type="selection"
         	width="55">
    </el-table-column>
    <el-table-column
            sortable
            label="日期"
            width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
            sortable
            prop="name"
            label="姓名"
            width="120">
    </el-table-column>
    <el-table-column
            sortable
            prop="address"
            label="地址"
            show-overflow-tooltip>
    </el-table-column>
</el-table>

js

data:{
    tableData: [
        {
            id : '1',
            date: '2016-05-03',
            name: '张三',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            id : '2',
            date: '2016-05-02',
            name: '李四',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            id : '3',
            date: '2016-05-04',
            name: '王五',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            id : '4',
            date: '2016-05-01',
            name: '赵六',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            id : '5',
            date: '2016-05-08',
            name: '钱七',
            address: '上海市普陀区金沙江路 1518 弄'
        },
        {
            id : '6',
            date: '2016-05-06',
            name: '老八',
            address: '上海市普陀区金沙江路 1518 弄'
        },
        {
            id : '7',
            date: '2016-05-07',
            name: '老九',
            address: '上海市普陀区金沙江路 1518 弄'
        }
    ],
    multipleSelection: []
},
methods:{
    // 勾选的数据
    handleSelectionChange:function(val) {
        this.multipleSelection = val;
    },
    // 行添加class
    selectRowClassName:function({row, rowIndex}){
        var color = "";
        this.multipleSelection.forEach(item => {
            if (item.id == row.id){
                color = "warning-row";
            }
        });
        return color;
    },
    // 点击行即可勾选
    rowClickSelect:function(row, column, event){
        let index = this.multipleSelection.findIndex(item => {
            // 判断已选数组中是否已存在该条数据
            return item.id == row.id
        });
        if (index == -1) {
            // 如果未存在，设置已选状态，并在list中添加这条数据
            this.$refs.multipleTable.toggleRowSelection(row,true); //设置复选框为选中状态
        } else {
            // 如果已存在，设置未选状态，并在list中删除这条数据
            this.$refs.multipleTable.toggleRowSelection(row,false); //设置复选框为未选状态
        }
    }
},

css

.el-table__body tr.warning-row >td {
    background-color: #CCE6FF;
}

演示