First of all, the table is made up of fixed columns that contain multiple levels of table headers, and some of the columns in the dynamic header need to float to the right.

The final result

Next, let’s talk about the pits encountered and the solutions

Problem: Table display exception when setting minimum height and append floating table header

Workaround: You can set the table height to automatic or call the table doLayout method when the data request is complete

::v-deep #mTable .table {
    min-height: auto;
    margin-top: 40px;
  }
Copy the code
this.$nextTick(() = > {
    this.$refs.mTable.$refs.consultOrder.doLayout()
})
Copy the code

Note: I also found a problem here, when the scrollbar is under the floating block, it does not slide, so I set the height of the table to Automatic.

Next, some sharp-eyed students may find the exception, floating list head display wrong ah, originally should be in the last column, how the whole move forward.

When a table has floating entries, it generates two table headers

At this time, expand the two theads respectively, and find some differences between the two. The loadable table in front of us is multi-stage header, so we set its colspan to 2, but expand the el-table__fixed-right and find that the colspan of the loadable goods column is 1.

el-table__header-wrapper

el-table__fixed-right>el-table__fixed-header-wrapper

Methods of liberation: Because our multilevel table headers are processed in the el-table :header-cell-style, So we set colSPAN for multiple table headers there for el-table__header-wrapper and for el-table__fixed-header-wrapper.

discountHeaderStyle({ row, column, rowIndex, columnIndex }) { // Table header cell custom style
  if (column.label === ' ') { // If label is empty, the header is not displayed
    return { display: 'none'}}const headerSet = this.tableSetting.headerSet
  if (headerSet) {
    for (let i = 0, len = headerSet.length; i < len; i++) {
      if (headerSet[i].label === column.label) {
        this.$nextTick(() = > {
          if (document.getElementsByClassName(column.id).length ! = =0) {
            const dom = document.getElementsByClassName('el-table__header-wrapper') [0].getElementsByClassName(column.id)
            dom[0].setAttribute('colspan', headerSet[i].colspan)
            const dom1 = document.getElementsByClassName('el-table__fixed-header-wrapper')
            if(dom1.length ! = =0) {
              const _dom1 = dom1[0].getElementsByClassName(column.id)
              _dom1[0].setAttribute('colspan', headerSet[i].colspan)
            }
          }
        })
        return}}}}Copy the code

GetElementsByClassName (column. Id) is the parent element of the table, and the tBody element in the table will also be affected.

Tips: I am also a front-end programmer who has just worked for a while, and I am slowly learning and groping. This article is the first article I published, maybe some parts of the description is not very clear, I hope you can understand more, if you have other good solutions, you can also leave a message in the comment section, learn from each other.