How to combine element ui tables dynamically

as shown in the figure, merge the first two columns with the same mainId, because the number of data with the same mainId is variable and need to be juxtaposed dynamically. I have been unable to think of a good way, so ask netizens. The
code is here for everyone to modify: https://jsfiddle.net/ryx47gL8/

clipboard.png

Vue.js element-ui
Jan.10,2022 
export function rowSpan (id, row, cols, standardCol) {
  var tb = document.getElementById(id)
  var lastValue = ''
  var value = ''
  var pos = 1
  for (var i = row; i < tb.rows.length; iPP) {
    value = tb.rows[i].cells[standardCol].innerHTML
    if (value !== '' && value !== '\t' && value !== '\n' && value !== '\r') {
      if (lastValue == value) { // eslint-disable-line
        var colsbak = cols.slice(0)
        colsbak.sort(function (a, b) {
          return a - b
        })
        for (var c = colsbak.length - 1; c >= 0; c--) {
          tb.rows[i].deleteCell(colsbak[c])
          tb.rows[i - pos].cells[colsbak[c]].rowSpan = tb.rows[i - pos].cells[colsbak[c]].rowSpan + 1
        }
        posPP
      } else {
        lastValue = value
        pos = 1
      }
    }
  }
}

I operate dom.
id is the row in which the id,row: of the table is merged, usually the array, the column to be merged, the standardCol: standard column, that is, your mainId column

call as follows, call

after dom 
rowSpan('fixedtb', 0, [0, 1, 2, 3, 4, 5], 5)

means that starting from the first row, listing 6 as the standard, merging the first six columns

it is better to ask for help than to beg yourself. We have to search all kinds of Google and finally find a way. Refer to the article https://blog.csdn.net/qq_2946.
to put the complete code for others to refer to https://jsfiddle.net/u06mo3sy/

.

Previous: Do not use vuejs routing lazy load, directly use require to introduce files, why does it not work? Can you help with this?

Next: Liunx reported an error

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu