【vxe-table】和【el-table】调整列（单元格）背景色，指定列背景色设置，两层或多层表头也适用

最新推荐文章于 2024-08-01 16:40:31 发布

春晓_春眠花落

最新推荐文章于 2024-08-01 16:40:31 发布

阅读量8.8k

点赞数 4

分类专栏： vxe-table 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49668076/article/details/124895399

版权

vxe-table 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Element UI的el-table和VXE Table中调整列背景色。针对多层表头的情况，分别展示了两种组件的解决方案。在el-table中，通过cell-style属性和索引判断实现背景色变化；而在vxe-table中，由于columnIndex受到表头影响，需要结合column的title属性来定位目标列进行样式设置。

摘要由CSDN通过智能技术生成

el-table调整列背景色

效果图
在这里插入图片描述
C、D、E三列上面还有一层表头，这三列插槽里是span标签，只需要回显值，如果要动态输入使用输入框的话，可能要深度改样式，输入框的背景色是白色的，我们设置的列背景色在它下面。

使用el-table的cell-style方法
在这里插入图片描述

 <el-table
                ref="airunitTable"
                class="vetifiTable"
                border
                stripe
                :header-cell-style="{ 'text-align': 'center',         			background: '#b1defd', height: '34px' }"
                :cell-style="tableCellStyle"
                :data="tableData"
                :height="screenHeight - 300"
                :highlight-current-row="true"
              >

重点看一下打印出来的columnIndex，它不受表头影响，从0到7，是完整的索引号

// 列表单元格样式
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex, 'tablestyle')
      let rowStyle = {}
      if (columnIndex == 4 || columnIndex == 6 || columnIndex == 7) {
        rowStyle.background = '#F2F2F2'      
      } else {
        rowStyle.background = '#fff'
      }
      return rowStyle
    },

在这里插入图片描述

vxe-table调整列背景色

效果图
在这里插入图片描述
这里也是有两层表头，并且不止一个。

  <vxe-table
          class="vxetable"
          :align="allAlign"
          :data="tableData"
          border
          :cell-style="vxecellStyle"
          resizable
          :height="screenHeight - 300"
          :tooltip-config="{ showAll: true, enterable: true, contentMethod: showTooltipMethod }"
        >

打印出来的columnIndex 不是完整的，很明显受表头影响。一个多层表头是

一个索引，里面的列索引又从0开始排序。这个时候只凭列索引很难找到我们

要的那几列，这里就要说到colunm了，colunm包含了当前列的一些信息，包

括列名，所以用两个条件判断，也能顺利解决

另外边框线也受影响，要再设置一下边框线

   vxecellStyle({ row, column, columnIndex }) {
      console.log(row, column, columnIndex, '=======')
      let rowstyle = {}

      if ((column.title == 'xx数' && columnIndex == '0') || (column.title == 'xxx数' && columnIndex == '0')) {
        rowstyle.background = '#F2F2F2'
        rowstyle.borderRight = '1px solid #e8eaec'
        rowstyle.borderBottom = '1px solid #e8eaec'
      } else {
        rowstyle.background = '#fff'
        rowstyle.borderRight = '1px solid #e8eaec'
        rowstyle.borderBottom = '1px solid #e8eaec'
      }
      return rowstyle
    },