详解element-ui el-table表格中勾选checkbox(selection)，高亮当前行高亮某一行(某一行设置特殊的样式)_el-table checkbox

<template>
    <el-table 
    class="table" 
    ref="table" 
    :data="tableData" 
    :row-class-name="row_class_name"
    @selection-change="selection_change" 
    @row-click="row_click">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="value" label="序号" width="50" />
        <el-table-column prop="label" label="列名" minWidth="100" />
    </el-table>
</template>
    
<script>
export default {
    data() {
        return {
            selection: [],
            tableData: [
                { label: '显示文本1', value: 1 },
                { label: '显示文本2', value: 2 },
                { label: '显示文本3', value: 3 },
                { label: '显示文本4', value: 4 },
                { label: '显示文本5', value: 5 },
            ],
        }
    },
    methods: {
        row_class_name({ row, rowIndex }) {
            return this.selection.find(v => v.value == row.value) ? 'selected' : '';
        },
        selection_change(selection) {
            this.selection = selection;
        },
        row_click(row, column, event) {
            this.$refs.table.toggleRowSelection(row)
        },
    }
};
</script>
    
<style lang="scss" scoped> 
.table {
     >>>tr.selected {
         $backgroundColor: #E6A23C; // 高亮选中行背景色 
         background-color: $backgroundColor ;
         td {
             background-color: $backgroundColor !important;
         }
     }
 }
</style>