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

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

文章图片

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

文章图片

重点看一下打印出来的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】和【el-table】调整列（单元格）背景色，指定列背景色设置，两层或多层表头也适用

文章图片

vxe-table调整列背景色效果图

文章图片

这里也是有两层表头，并且不止一个。

打印出来的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 },