el-table变色

<!--name: "assetsCirculationDetails"-->
<template>
    <section class="main-content">
        <div class="content-top-column">
            <h2></h2>
            <el-button round @click="cancel" size="mini">返回列表</el-button>
        </div>
        <section class="content-body mt20 pad15">
            <el-table size="medium" :data="tableList" style="width: 100%"  v-loading='isLoading' :cell-style="cellClass" :header-cell-style="cellTitle">
                <el-table-column prop="typeDesc" label="操作类型"></el-table-column>
                <el-table-column prop="source.holderDesc" label="操作前资产位置">
                    <template slot-scope="scope">
                        {{ scope.row.source.holderDesc || '-'}}
                    </template>
                </el-table-column>
                <el-table-column prop="source.holderCode" label="操作前资产位置明细">
                    <template slot-scope="scope">
                        <template  v-if="scope.row.source.holder == 3">
                            {{scope.row.source.holderNo}}/{{scope.row.source.holderCode}}/{{scope.row.source.holderName}}
                        </template>
                        <template v-else>
                            {{scope.row.source.holderCode || '-'}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="target.holderDesc" label="操作后资产位置">
                    <template slot-scope="scope">
                        {{ scope.row.target.holderDesc || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作后资产位置明细" >
                    <template slot-scope="scope">
                        <template v-if="scope.row.target.holder == 3">
                            {{scope.row.target.holderNo}}({{scope.row.target.holderCode}})/{{scope.row.target.holderName}}
                        </template>
                        <template v-else>
                            {{scope.row.target.holderCode || '-'}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="source.statusDesc" label="操作前资产状态">
                    <template slot-scope="scope">
                        {{scope.row.source.statusDesc || '-'}}
                    </template>
                </el-table-column>
                <el-table-column prop="target.statusDesc" label="操作后资产状态">
                    <template slot-scope="scope">
                        {{scope.row.target.statusDesc || '-'}}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="source.ownerDesc" label="操作前资产归属">
                    <template slot-scope="scope">
                        {{scope.row.source.ownerDesc || '-'}}
                    </template>
                </el-table-column>
                <el-table-column prop="source.ownerCode" label="Sid">
                    <template slot-scope="scope">
                        {{scope.row.source.ownerCode || '-'}}
                    </template>
                </el-table-column>
                <el-table-column prop="target.ownerDesc" label="操作后资产归属">
                    <template slot-scope="scope">
                        {{scope.row.target.ownerDesc || '-'}}
                    </template>
                </el-table-column>
                <el-table-column prop="target.ownerCode" label="Tid">
                    <template slot-scope="scope">
                        {{scope.row.target.ownerCode || '-'}}
                    </template>
                </el-table-column> -->
                <el-table-column prop="gmtCreate" label="操作时间">
                    <template slot-scope="scope">
                        {{scope.row.gmtCreate || '-'}}
                    </template>
                </el-table-column>
                <el-table-column prop="operator" label="操作人">
                    <template slot-scope="scope">
                        {{scope.row.operator || '-'}}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>
        </section>
        <!--    分页      -->
        <div class="eboss-row mt20  justify-end">
            <div class="page-scroll">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageIndex"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        :total="totalCount"
                        layout="total, sizes, prev, pager, next">
                </el-pagination>
            </div>
        </div>
    </section>
</template>
<script>
  
    export default {
        mixins: [mixin],
        data() {
            return {
                pageName: getPagename(), //页面标题
                tableList: [], //列表
                privilege: {}, // 鉴权
                funList:[], // 操作列表
                query:{
                    type: '',  //操作类型
                    itemNo: '' // 成品资产NO
                },
                pageIndex: 1,  // 页码
                pageSize: 10, // 每页条数
                totalCount: 0,
                btnLoading: false, // 查询按钮loading
                isLoading: false, // 表格loading
            }
        },
        watch: {},
        mounted(){
           
        },
        methods: {
       
            cellClass (row, index) {
                if(row.columnIndex==3|| row.columnIndex==4 ||row.columnIndex==6){
                     return { "color": "#ff714b" }
                }
            },
            cellTitle(row, index) {
                if(row.columnIndex==3|| row.columnIndex==4 ||row.columnIndex==6){
                     return { "color": "#ff714b" }
                }
            },
        }
    }
</script>

<style scoped>
    .col-flex .form-label{
        width: 110px;
        padding: 5px 10px;
    }
    .pad15{ padding: 15px;}
</style>