avue中的avue-crud的多级表头中的间隔颜色

avue中的avue-crud的多级表头中的间隔颜色

avue 的官网 https://avuejs.com/views/doc.html
需要实现的效果图片

avue-crud
设置id和函数
:header-cell-class-name的解释
表头单元格的className的回调方法，也可以使用字符串为所有表头单元格设置一个固定的className,function({row,column,rowIndex,columnIndex})

代码实现

     headerClassName(tab){
       //颜色间隔
      let back = ""
      if (tab.columnIndex > 1 && tab.column.level === 1) {
        if (tab.columnIndex % 2 === 0) {
          back = "back-one"
        } else if (tab.columnIndex % 2 === 1) {
          back = "back-two"
        }
      }
      return back;
    },

css间隔的颜色设置

#out-table .back-one {
  background: #e5e9f2 !important;
}
#out-table .back-two {
  background: #dddee0 !important;
}