element el-table表格表头某一列表头文字或者背景修改颜色

大大。

于 2024-05-27 12:01:55 发布

阅读量291

点赞数 1

分类专栏： element相关文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43923808/article/details/139234486

版权

element相关专栏收录该内容

40 篇文章 0 订阅

订阅专栏

效果如下

整体代码，具体方法在最下面！

    <el-table v-loading="listLoading" :data="sendReceivList"  element-loading-text="Loading" border fit ref="tableList"  :header-cell-class-name="addClass"  
      highlight-current-row @selection-change="handleSelectChange" :row-key="getRowKey">
   
    <el-table-column label="单位" align="center" width="60px">
        <template slot-scope="scope">
          <div>{{ scope.row.unit }}</div>
        </template>
      </el-table-column>
      
      <el-table-column label="期初结存" align="center"  >
      <el-table-column label="数量" align="center"   >
        <template slot-scope="scope">
          <div>{{ scope.row.preNum }}</div>
        </template>
      </el-table-column>
       <el-table-column label="平均单价" align="center"   >
        <template slot-scope="scope">
          <div>{{ scope.row.prePrice }}</div>
        </template>
      </el-table-column>
       <el-table-column label="金额" align="center"   >
        <template slot-scope="scope">
          <div>{{ scope.row.preUnitPrice }}</div>
        </template>
      </el-table-column>
      </el-table-column>
   <el-table-column label="本期入库" align="center"  >
      <el-table-column label="数量" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.rkNum }}</div>
        </template>
      </el-table-column>
       <el-table-column label="平均单价" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.rkUnitPrice }}</div>
        </template>
      </el-table-column>
       <el-table-column label="金额" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.rkPrice }}</div>
        </template>
      </el-table-column>
      </el-table-column>
     <el-table-column label="本期出库" align="center"  >
      <el-table-column label="数量" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.ckNum }}</div>
        </template>
      </el-table-column>
       <el-table-column label="平均单价" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.ckUnitPrice }}</div>
        </template>
      </el-table-column>
       <el-table-column label="金额" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.ckPrice }}</div>
        </template>
      </el-table-column>
      </el-table-column>
     <el-table-column label="期末结余" align="center"  >
      <el-table-column label="数量" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.postNum }}</div>
        </template>
      </el-table-column>
       <el-table-column label="平均单价" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.postPrice }}</div>
        </template>
      </el-table-column>
       <el-table-column label="金额" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.postUnitPrice }}</div>
        </template>
      </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="出入库流水" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="jumpClick"   size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

主要看这！！！

<el-table :data="sendReceivList"  :header-cell-class-name="addClass"

 methods: {
 
  addClass({ row, rowIndex, column, columnIndex }) {
      if (column.label == '数量'||column.label == '平均单价'||column.label == '金额') {
        return "whiteColor";
      } else {
        return 'huiColor'
      }
    },
  },


<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-table__header-wrapper th.whiteColor {
  background-color: white !important;
  color: red;
}
::v-deep .el-table__header-wrapper th.huiColor {
  background-color: #F5F7FA !important;
}

</style>