el-table 合计放顶部 以及放下面滚动条以上 以及各项样式修改

el-table 合计带来了很多便利 但是其一些样式或者位置比较难修改  下面是一些方法

放顶部

  .el-table .el-table__body-wrapper {

    order: 1 !important;

  }

修改这个层级

修改每一样样式需要用到CSS选择器

  .el-table .has-gutter tr {

    td {

      padding: 0;

    }

    td:nth-of-type(1) {

      color: rgb(51, 51, 51);

    }

    td:nth-of-type(2) {

      color: #458ff3;

    }

    td:nth-of-type(3) {

      color: #458ff3;

    }

    td:nth-of-type(4) {

      color: #333333;

    }

    td:nth-of-type(5) {

      color: #ff6761;

    }

    td:nth-of-type(6) {

      color: #ff8b17;

    }

    td:nth-of-type(7) {

      color: #ff8b17;

    }

    td:nth-of-type(8) {

      color: #333333;

    }

 

放底部

  .el-table--scrollable-x .el-table__body-wrapper {

    overflow-x: hidden !important;

    z-index: 2 !important;

  }

  .el-table__footer-wrapper {

    overflow-x: auto;

    border-top: 1px solid #f4f4f4;

  }

需要去找到底部DOM 监听 然后让合计行跟着一起滚动

const footDom = this.$refs.eltable.$refs.footerWrapper

    footDom.addEventListener('scroll', () => {

      const left = footDom.scrollLeft

      this.$refs.eltable.$refs.bodyWrapper.scrollLeft = left

    })