?文章來源地址http://www.zghlxwxcb.cn/news/detail-836078.html

<el-table :data="tableData" @row-click="handleRowClick" :rowClassName="tableRowClassName" 
    :header-row-style="{color:'#333',fontWeight:'bold',fontSize:'14px'}" style="width: 100%"> 
    <el-table-column
        prop="totalPrice"
        label="現(xiàn)金總額"> 
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="注冊時間">
        <template slot-scope="scope">
            <div> 
                <el-switch"
                    v-model="scope.row.experienceFlag"
                    >
                </el-switch>
            </div>
        </template>
    </el-table-column>
    <el-table-column
        prop="address"
        label="消費簽名時間">
        <template slot-scope="scope">
            <div>
                {{ scope.row.dateFlag?'限制':'不限制' }}
            </div>
        </template>
    </el-table-column>  
    <el-table-column
        prop="address"
        label="員工">
    </el-table-column> 
    <el-table-column
        prop="categoryName"
        label="獲客渠道">
    </el-table-column> 
    <el-table-column 
        label="選擇">
        <template slot-scope="scope">
            <div>
                <svg-icon iconClass="praise" v-show="scope.$index!=tableRowIndex" class="icons praise verticalMiddle" ></svg-icon>
                <span class="el-icon-check checkValTable" v-show="scope.$index==tableRowIndex"></span>
            </div>
        </template>
    </el-table-column> 
</el-table>

<script>  
    export default{  
        data(){
            return{
                tableData:[],
                tableRowIndex:'-1'
            }
        },
        methods:{
            //選擇行
            handleRowClick(row,rowIndex){ 
                //獲取選擇行的下標(biāo)
                console.log(rowIndex);
                this.tableRowIndex=this.getArrayIndex(this.tableData,row)
                console.log('tableRowIndex');
                console.log(this.tableRowIndex);
                this.tableRowClassName(row,this.tableRowIndex);
            },
           //最終與下方獲取到的數(shù)組下標(biāo)，與選中的下標(biāo)對比，若相等則將指定行增加highLight-row類名
            tableRowClassName({row,rowIndex}){
                if(rowIndex==this.tableRowIndex){ 
                    return 'highlight-row'
                }
            },
            getArrayIndex(arr,obj){
                var i=arr.length;
                //循環(huán)獲取所選行的數(shù)據(jù)與表格列表數(shù)組的某個下標(biāo)數(shù)據(jù)是否相等
                //若相等返回下標(biāo)
                while(i--){
                    if(arr[i]===obj){
                        return i;
                    }
                }
                return -1;
            },
        }
    }
</script>

到了這里，關(guān)于el-table實現(xiàn)表格整行選中狀態(tài)，背景顏色切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！