el-table表头布局的一些小思路(表头合并)

最新推荐文章于 2024-05-22 08:30:00 发布

白魔咒

最新推荐文章于 2024-05-22 08:30:00 发布

阅读量906

点赞数

分类专栏： Element 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_42913476/article/details/128096721

版权

Element 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述
第一个红框表头单元格的合并 header-cell-class-name

    // 通过el-table的header-cell-class-name的方法给对应节点添加class
    headerCellClassName: function ({row, column, rowIndex, columnIndex}) {
      if(rowIndex === 0 && (columnIndex == 6 || columnIndex == 7 || columnIndex == 8 || columnIndex == 12 || columnIndex == 13)){
        return 'aaa'
      }else if(rowIndex === 1 && (columnIndex == 5 || columnIndex == 6 || columnIndex == 7 || columnIndex == 18 || columnIndex == 19)){
        return 'bbb'
      }
    },
  	// 在 mounted 里进行通过dom进行合并。
    this.$nextTick(() => {
      var doms0 = document.querySelectorAll('.aaa')
      // doms1是doms0下的二级空白节点用来占位的
      var doms1 = document.querySelectorAll('.bbb')
      doms1.forEach(function (item) {
          item.rowSpan = 0
          item.colSpan = 0
          item.style.display = 'none'
      })
      doms0.forEach(function (item,index) {
        // 添加aaa的时候有一个隐藏元素也被加上了，所以这里过滤了一下。根据实际可能有不同 
        if(index !== 0){
          item.rowSpan = 2
        }
      })
    })

第二红框，边线的调整 header-cell-style

    // 表头样式 
    headerCellStyle: function ({row, column, rowIndex, columnIndex}) {
      if(rowIndex === 0 && (columnIndex == 6 || columnIndex == 7 || columnIndex == 8 || columnIndex == 12 || columnIndex == 13)){
        return 'border-bottom: none;'
      }else if(rowIndex === 1){
        return 'border-bottom: none;padding: 0px'
      }else if(rowIndex === 2 && columnIndex != 19 && columnIndex != 24){
        return 'border-top: 1px solid rgb(57, 57, 57);padding: 0px'
      }else if (rowIndex !== 0){
        return 'padding: 0px'
      }
    },