Vue使用element-ui table实现多级表头设置不同背景色

已于 2024-08-16 17:46:20 修改
阅读量846 收藏 4
点赞数 5
分类专栏： 笔记 文章标签： vue.js elementui
于 2024-08-16 17:45:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44143975/article/details/141254511
版权

Vue使用element-ui table实现多级表头设置不同背景色

目录

前提

首先，我们要了解table表头行列是怎么排序的，我画了一个简单的图标注一下，其中坐标表示（rowIndex, columnIndex），这里要特别注意红色的坐标，表示每一行的起始坐标
在这里插入图片描述

效果

以下是使用我的思路实现的效果，当然，网上也有很多大牛分享的能实现效果的帖子，这里主要是针对和我一样小白的菜狗做一个思路整理，知其所以然才能应对不同的需求
在这里插入图片描述

思路整理

1、使用header-cell-style方法实现；
2、明确我们表头渠道的顺序（表头的名称一般都是前端写死的）；
红框为一级，蓝框为二级，绿框为三级
在这里插入图片描述

3、将我们的二级部门和三级部门分别提炼成一个数组（顺序无所谓）；
下面是二级，上面是三级
在这里插入图片描述
4、定义一个对象，存放二级和三级部门在整个渠道数组中的索引

created() {
    this.indexList = this.getChannelIndex()
 },
 method: { 
    // 找出二级部门和三级部门排序索引值，用于设置表头样式
    getChannelIndex() {
      let indexs2 = this.channel2List.map(m => sort().channelSortNew.indexOf(m))
      let indexs3 = this.channel3List.map(m => sort().channelSortNew.indexOf(m))
      return { indexs2, indexs3 }
    }
 }

5、header-cell-style绑定方法的实现：

// 下面正式开始设置样式
      if (rowIndex === 0) { // 第一行的样式设置
        if (columnIndex === 0 || columnIndex === 1) { // 如果是第一行第一列和第二列，则设置为以下样式
          return 'background-color: #ecf1e0; color: #000;border: .5px solid #aaa;'
        } else if (columnIndex < 5) { // 如果是第一行且小于第六列（实际就是我们的一级部门，因为位置固定且靠前，所以我直接写死了），则设置为以下样式
          return 'background-color: #7c9148; color: #000;border: .5px solid #aaa;'
        } else if (indexs2.includes(columnIndex - 2)) {
          // 判断当前columnIndex是否存在于indexs2中(减2是因为我们时间段和品线这两列，它们也会算在第一行，但我们的渠道其实是从索引值2开始的)
          return 'background-color: #c8d6a1; color: #000;border: .5px solid #aaa;'
        } else if (indexs3.includes(columnIndex - 2)) {
          // 同上我们判断是否存在于indexs3中（即判断是否为三级部门）
          return 'background-color: #dae3c0; color: #000;border: .5px solid #aaa;'
        } else {
          // 第一行其他情况都不符合则为四级部门
          return 'background-color: #fff; color: #000;border: .5px solid #aaa;'
        }
      } else if (rowIndex === 1) { // 第二行的样式设置
        if (columnIndex < 9) { // 因为我们第一行的一级部门下分别有三列，所以加起来是9列
          return 'background-color: #7c9148; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex >= indexs2[i2] * 3) && (columnIndex <= indexs2[i2] * 3 + 3)) {
          // 判断当前columnIndex是否是二级部门索引（如果columnIndex大于等于渠道索引的3倍且小于等于渠道索引的3倍+3）
          return 'background-color: #c8d6a1; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex >= indexs3[i3] * 3) && (columnIndex <= indexs3[i3] * 3 + 3)) {
          // 判断当前columnIndex是否是三级部门索引
          return 'background-color: #dae3c0; color: #000;border: .5px solid #aaa;'
        } else {
          // 第二行其他情况都不符合则为四级部门
          return 'background-color: #fff; color: #000;border: .5px solid #aaa;'
        }
      }
    }

复杂案例代码分享

以上步骤是简化版，明白了其中的道理，我们就可以实现更复杂的样式了，下面分享一下我一个比较复杂的实际需求涉及的完整代码

<template>
  <div class="app-container" style="margin-bottom: 40px">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div>
          <el-table
            id="table"
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            max-height="600"
            size="costom"
            :header-cell-style="renderHeader"
          >
            <el-table-column key="dateRange" prop="dateRange" show-overflow-tooltip fixed label="时间段" align="center" width="100" />
            <el-table-column key="product" prop="product" show-overflow-tooltip fixed label="品线" align="center" width="120" />
            <el-table-column :key="Math.random()" label="有效销售" align="center">
              <el-table-column v-for="(item, index) in channelList" :key="index" :label="item" align="center">
                <el-table-column :key="Math.random()" label="2023" align="center" />
                <el-table-column :key="Math.random()" label="2024" align="center" />
                <el-table-column :key="Math.random()" label="同比" align="center" />
              </el-table-column>
            </el-table-column>
            <el-table-column v-for="(item, index) in channelList" :key="index" :label="item" align="center">
              <el-table-column :key="Math.random()" label="整体均价" align="center">
                <el-table-column :key="Math.random()" label="2023" align="center" />
                <el-table-column :key="Math.random()" label="2024" align="center" />
                <el-table-column :key="Math.random()" label="同比" align="center" />
              </el-table-column>
              <el-table-column :key="Math.random()" label="核心品类均价" align="center">
                <el-table-column :key="Math.random()" label="2023" align="center" />
                <el-table-column :key="Math.random()" label="2024" align="center" />
                <el-table-column :key="Math.random()" label="同比" align="center" />
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import { getToken } from '@/utils/auth'

import { initDatawork } from '@/api/data'
import { parseTime } from '@/utils/index'
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import { sort, getChannelsNew } from '../../../../utils/customIndex-setting'

export default {
  name: 'ChanSalesAvePrice',
  data() {
    return {
      channelList: [], // 排好序的完整渠道列表
      channel3List: ['京东自营小计', '销售管理中心', '天猫旗舰店小计', // ....],
      channel2List: ['京东业务部', '销售管理中心', '淘系业务部',// ...],
      indexList: {}
    }
  },
  created() {
    getChannelsNew().then(res => {
      this.sum = res.channels
      this.branchs = res.normalChannels
    })
    this.indexList = this.getChannelIndex()
    this.channelList = sort().channelSortNew
  },
  methods: {
    // 表头字体样式
    renderHeader({ row, column, rowIndex, columnIndex }) { // 这里有个本人踩过的坑分享一下：rowIndex, columnIndex只能这么写，不能自己写别名
      const { indexs2, indexs3 } = this.indexList
      const len = sort().channelSortNew.length
      let i2, i3
      // 若当前表头单元格为第三行，则判断对应第二行的columnIndex是否存在于需要设置样式的数组中，是的话将数组对应值的索引保存

      if (rowIndex === 1) {
        if (columnIndex > len) {
          if (rowIndex === 1 && indexs2.includes(Math.floor((columnIndex - len) / 2))) {
            i2 = indexs2.indexOf(Math.floor((columnIndex - len) / 2))
          } else if (rowIndex === 1 && indexs3.includes(Math.floor((columnIndex - len) / 2))) {
            i3 = indexs3.indexOf(Math.floor((columnIndex - len) / 2))
          }
        }
      } else if (rowIndex === 2) {
        if (columnIndex < len * 3) {
          if (indexs2.includes(Math.floor(columnIndex / 3))) {
            i2 = indexs2.indexOf(Math.floor(columnIndex / 3))
          } else if (indexs3.includes(Math.floor(columnIndex / 3))) {
            i3 = indexs3.indexOf(Math.floor(columnIndex / 3))
          }
        } else {
          if (indexs2.includes(Math.floor((columnIndex - len * 3) / 6))) {
            i2 = indexs2.indexOf(Math.floor((columnIndex - len * 3) / 6))
          } else if (indexs3.includes(Math.floor((columnIndex - len * 3) / 6))) {
            i3 = indexs3.indexOf(Math.floor((columnIndex - len * 3) / 6))
          }
        }
      }
      if (rowIndex === 0) {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
          return 'background-color: #deedf2; color: #000;border: .5px solid #aaa;'
        } else if (columnIndex < 6) {
          return 'background-color: #d09996; color: #000;border: .5px solid #aaa;'
        } else if (indexs2.includes(columnIndex - 3)) {
          return 'background-color: #dfbab8; color: #000;border: .5px solid #aaa;'
        } else if (indexs3.includes(columnIndex - 3)) {
          return 'background-color: #eedddb; color: #000;border: .5px solid #aaa;'
        } else {
          return 'background-color: #fff; color: #000;border: .5px solid #aaa;'
        }
      } else if (rowIndex === 1) {
        if (columnIndex < 3) {
          return 'background-color: #64aac3; color: #000;border: .5px solid #aaa;'
        } else if (indexs2.includes(columnIndex)) {
          return 'background-color: #64aac3; color: #000;border: .5px solid #aaa;'
        } else if (indexs3.includes(columnIndex)) {
          return 'background-color: #bedde6; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex < 6 + len) && (columnIndex >= len)) {
          return 'background-color: #d09996; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex >= indexs2[i2] * 2 + len) && (columnIndex <= indexs2[i2] * 2 + len + 1)) {
          return 'background-color: #dfbab8; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex >= indexs3[i3] * 2 + len) && (columnIndex <= indexs3[i3] * 2 + len + 1)) {
          return 'background-color: #eedddb; color: #000;border: .5px solid #aaa;'
        } else {
          return 'background-color: #fff; color: #000;border: .5px solid #aaa;'
        }
      } else if (rowIndex === 2) {
        if (columnIndex < 9) {
          return 'background-color: #64aac3; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex >= indexs2[i2] * 3) && (columnIndex <= indexs2[i2] * 3 + 2)) {
          return 'background-color: #64aac3; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex >= indexs3[i3] * 3) && (columnIndex <= indexs3[i3] * 3 + 2)) {
          return 'background-color: #bedde6; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex < 18 + len * 3) && (columnIndex >= len * 3)) {
          return 'background-color: #d09996; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex >= indexs2[i2] * 6 + len * 3) && (columnIndex < indexs2[i2] * 6 + len * 3 + 6)) {
          return 'background-color: #dfbab8; color: #000;border: .5px solid #aaa;'
        } else if ((columnIndex >= indexs3[i3] * 6 + len * 3) && (columnIndex < indexs3[i3] * 6 + len * 3 + 6)) {
          return 'background-color: #eedddb; color: #000;border: .5px solid #aaa;'
        } else {
          return 'background-color: #fff; color: #000;border: .5px solid #aaa;'
        }
      }
    },
    // 找出二级部门和三级部门排序索引值，用于设置表头样式
    getChannelIndex() {
      let indexs2 = this.channel2List.map(m => sort().channelSortNew.indexOf(m))
      let indexs3 = this.channel3List.map(m => sort().channelSortNew.indexOf(m))
      console.log(indexs2, indexs3)
      return { indexs2, indexs3 }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep #average-price {
  th{
    .cell{
      text-align: center;
    }
  }
}
</style>

下面是用以上代码实现的一个表头效果图，比较长就放两个截图
在这里插入图片描述
在这里插入图片描述

shika233
关注
专栏目录
vue+element-ui动态生成多级表头
北冥鲲飞后的博客
03-06 1万+
vue+elementhtml配置:&lt;div id="table"&gt;{{tableData}} &lt;el-table :data="tabledata01" :span-method="tableSpanMethod" max-height="420"&gt; &lt;el-table-column v-for='ite
element-ui table组件如何使用render属性的实现
01-19
在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。 障碍： 类似于下面自定义表列的样式，...
vue+element-ui动态生成多级表头的方法
12-29
vue+element html配置： {{tableData}} <el-table-column v-if='item.children||item.children
el-table 修改多级表头背景色
weixin_68878908的博客
01-15 5003
el-table 修改多级表头背景色,利用组件自带属性header-row-style来完成,注意一定不要全局设置表头颜色，因为全局设置必须加！important，这样我们就无法覆盖了。
element设置表头字体颜色、背景颜色
m0_63034063的博客
05-30 366
if (column.label == "本次使用金额") {
element el-table表格表头某一列表头字段修改颜色
蓝胖子的博客
10-10 2703
element el-table表格表头某一列表头字段修改颜色
Element ui 丨修改el-table 表头的背景色、字号及文字颜色
weixin_39142106的博客
05-23 5765
Element ui 丨修改el-table 表头的背景色、字号及文字颜色
基于Vue 2.x版本Element中Table 表格背景色、表头等样式自定义
qq_35153900的博客
07-30 2648
Element中Table 表格背景色
Element-UI表格自定义背景颜色
qq_47229902的博客
03-29 4999
自定义elementUI表格背景颜色，更改鼠标经过背景颜色
修改elementui el-table不同的表头背景颜色
DDY_18273570119的博客
04-19 869
:header-cell-style="rowClass"
element-ui表格中嵌套表头不同的表格
最新发布
qq_44161722的博客
08-08 562
【代码】element-ui表格中嵌套表头不同的表格。
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
12-09
定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table ...
VUE element UI实现动态生成多级表头递归循环生成
qq_42619759的博客
03-14 1235
【代码】VUE element UI实现动态生成多级表头递归循环生成。
一文掌握elementUI构建复杂表格，合并行或列，多级表头等
风中追风
01-02 7101
前端开发过程中常常会遇到各种开发表格的场景，有时候有的表格比较简单有的比较复杂（如下图简单示例所示，有合并项和多级表头），Elementui的el-table控件也可以支持构建复杂的表格，本文将指导你如何快速开发复杂表格~~~
Vue结合ElementUi修改＜el-table＞表格的背景颜色和表头样式
weixin_42960380的博客
08-29 7081
el-table的背景颜色 和表格的背景色
el-table自定义表头样式 两个标题并且标题颜色不同
weixin_51565477的博客
08-11 3379
<el-table :data="disabilityData" id="table" border :header-cell-style="{background:'#F7F7F8', color:'#18191B'}"> <el-table-column type="index" label="序号" width="50" align="center"></el-table-column> </el-table> 关键代码...
table表格多级表头且可编辑
weixin_45907435的博客
03-19 924
实现方式：在el-table中利用for循环根据返回的数据，渲染多级表头，然后在el-table-column标签中使用插槽slot="header" 自定义头部样式，使用插槽 slot-scope="scope" 自定义cell。item.disabled" v-model="scope.row[item.prop]" class="item" placeholder="请输入内容" />'label': '人口数','label': '排名','label': '排名',sjdwjc: '浙江省',
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值