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

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
    },