element 选中table指定行并添加背景色

element 选中table指定行并添加背景色

代码如下：

<template>
   <div class="tableDiv">
        <el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="cz" label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleSelectRow(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            tableData: [
                {   
                    id:"1",
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    id:"2",
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, 
                {
                    id:"3",
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, 
                {
                    id:"4",
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ],
            loading:false,  
            selectedId:""
        }
    },
    mounted() {},
    methods: {
        //点击选择按钮
        handleSelectRow(rowData){
            this.selectedId = rowData.id;
        },

        //为被选中的行添加类名， 改变选中行背景色
        tableRowClassName({row, rowIndex}) {
            if (row.id === this.selectedId) {
                return 'selected-row';
            } 
            else{
                return '';
            }
        }
    }
}
</script>

<style lang='less'>
.tableDiv{
    margin: 40px 60px;
}
.selected-row{
    background-color: #f0f9eb !important;
}
</style>

效果如图：

如有漏洞，欢迎互动指教！！！！！！！！！！！！！文章来源地址https://www.toymoban.com/news/detail-735161.html

到了这里，关于element 选中table指定行并添加背景色的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！