el-tabel为表头或者表体设置className类名,自定义样式
<template>
<el-table class="integralTable" :data="tableData" border style="width: 100%" :header-cell-style=headerStyle :cell-style="{textAlign:'center'}" :header-cell-class-name="headerClassName" :cell-class-name="cellClassName">
<el-table-column label="基础积分上限"></el-table-column>
<el-table-column label="活动积分上限"></el-table-column>
<el-table-column label="外勤积分上限"></el-table-column>
<el-table-column label="巡检积分上限"></el-table-column>
<el-table-column label="巡检异常附件分"></el-table-column>
<el-table-column prop="total" label="合计"></el-table-column>
</el-table>
</template>
<script>
export default {
data(){
return{
headerStyle: {
background: '#f5f7fa',
textAlign: 'center'
},
}
},
methods:{
headerClassName(row){
console.log(row.column)
if(row.column.property=='total') return 'totalClass'
},
cellClassName(row){
if(row.column.property=='total') return 'totalClass'
}
}
}
</script>
<style>
.integralTable .totalClass{
color: red;
}
</style>
解决el-table渲染错行的问题 加key标识一下即可
<template>
<el-tabs v-model="activeName">
<el-tab-pane label="区域积分排行榜" name="1"></el-tab-pane>
<el-tab-pane label="资管项目积分排行榜" name="2"></el-tab-pane>
<el-tab-pane label="委管项目积分排行榜" name="3"></el-tab-pane>
</el-tabs>
<el-table :data="dataList" style="width: 100%;margin-top:10px;" border stripe :header-cell-style=headerStyle :cell-style="{textAlign:'center'}" :key="timeStamp">
<el-table-column prop="ranking" label="排名"></el-table-column>
<el-table-column prop="name" label="区域名称" v-if="activeName!=1"></el-table-column>
<el-table-column prop="name" :label="activeName==1?'区域名称':'项目名称'" show-overflow-tooltip></el-table-column>
<el-table-column prop="userName" label="负责人"></el-table-column>
<el-table-column prop="integral" label="总积分"></el-table-column>
<el-table-column label="区域得分" v-if="activeName==1">
<el-table-column prop="integral1" label="基础积分"></el-table-column>
<el-table-column prop="integral2" label="活动积分"></el-table-column>
<el-table-column prop="integral3" label="外勤任务"></el-table-column>
<el-table-column prop="integral4" label="巡检任务"></el-table-column>
<el-table-column prop="integral5" label="巡检异常附加分" width="140"></el-table-column>
</el-table-column>
<el-table-column label="项目平均分(权重0.4)" v-if="activeName==1">
<el-table-column prop="integral6" label="项目平均分" width="155"></el-table-column>
</el-table-column>
<el-table-column label="项目积分组成" v-if="activeName!=1">
<el-table-column prop="integral1" label="基础积分"></el-table-column>
<el-table-column prop="integral2" label="活动积分"></el-table-column>
<el-table-column prop="integral3" label="外勤任务"></el-table-column>
<el-table-column prop="integral4" label="巡检任务"></el-table-column>
<el-table-column prop="integral5" label="巡检异常附加分" width="140"></el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
data(){
return{
headerStyle: {
background: '#f5f7fa',
textAlign: 'center'
},
dataList:[],
timeStamp:''
}
},
methods:{
},
watch: {
"dataList": {
handler(val) {
this.timeStamp = new Date() + ''
},
deep: true
}
}
}
</script>