el-table给表格中的表头和表体新增ClassName类名

最新推荐文章于 2024-01-17 17:57:45 发布

小意恩

最新推荐文章于 2024-01-17 17:57:45 发布

阅读量5.8k

点赞数 2

文章标签： vue.js html css

本文链接：https://blog.csdn.net/weixin_44399917/article/details/114286888

版权

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>
 
 <!--js-->
 <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>