• Record the experience of el-Table
  • The official elementary-UI documentation provides examples of basic el-table merging rows, but the hover style is problematic. We have looked at various solutions and finally sorted out a relatively simple solution, which we hope will be helpful

Let’s take a look at the overall effect

  • This is a table where the first three columns need to be merged
[{PRNM: 'crest ', MTNM:' deformation monitoring ', content: 'horizontal displacement ', PTCD: 'PL2', PTNM:' vertical coordinate ', MSTM: '1.02mm', val: '2021-2-5' minValue: '0.00' and maxValue: '2.00' pdfUrl: '}, {PRNM: 'crest, MTNM:' deformation monitoring, the content: 'horizontal displacement, PTCD: 'PL2, PTNM:' DaoChui 'MSTM:' 1.02 mm, val: '2021-2-13' minValue: '0.00' maxValue: '2.00' pdfUrl: '}, {PRNM: 'Dam crest ', MTNM:' Deformation monitoring ', Content: 'Horizontal displacement ', PTCD: 'PL3', PTNM:' vertical ', MSTM: '1.02mm', VAL: '2021-2-14', minValue: '0.00' maxValue: '2.00', pdfUrl: '}, {PRNM: 'crest, MTNM:' deformation monitoring, the content: 'vertical displacement, PTCD:' PL4, PTNM: type of '1', MSTM: '1.02 mm, val:' 2021-2-1 ', minValue: '0.00' maxValue: '2.00' pdfUrl: '}, {PRNM: 'crest, MTNM:' deformation monitoring, the content: 'Vertical displacement ', PTCD: 'PL5', PTNM:' Type 2', MSTM: '1.02mm', VAL: '2021-2-8', minValue: '0.00', maxValue: '2.00', pdfUrl: "'}, {PRNM: 'crest, MTNM:' seepage monitoring, content: 'seepage flow, PTCD:' PL6, PTNM: 'type 3, MSTM:' 1.02 mm, val: '2021-2-10', minValue: '0.00' maxValue: '2.00', pdfUrl: '}, {PRNM: 'crest, MTNM:' amount of environmental monitoring, content: 'upstream and downstream water level, PTCD:' PL7, PTNM: 'type 4, MSTM: '1.02 mm, val:' 2021-12-1 ', minValue: '0.00' maxValue: '2.00' pdfUrl: '}, {PRNM: '1 # crib, MTNM:' deformation monitoring, the content: 'horizontal displacement, PTCD:' 1 ', PTNM: '1', MSTM: '1.02 mm, val:' 2021-2-1 'minValue:' 0.00 'maxValue:' 2.00 'pdfUrl: "'}, {PRNM: '1 # crib, MTNM:' deformation monitoring, the content: '2', PTCD: '2', PTNM: '2', MSTM: '1.02 mm, val:' 2021-5-1 ', minValue: '0.00' maxValue: '2.00', pdfUrl: '}, {PRNM: '2 # crib, MTNM:' seepage monitoring, content: '3', PTCD: '3', PTNM: '3', MSTM: '1.02 mm, val:' 2021-4-1 ', minValue: '0.00' maxValue: '2.00' pdfUrl: '}, {PRNM: '2 # crib, MTNM:' seepage monitoring, content: '4', PTCD: '4', PTNM: '4' MSTM: '1.02 mm, val:' 2021-3-1 'minValue:' 0.00 'maxValue:' 2.00 'pdfUrl:'}]Copy the code
  • Merge the first three columns in the same way (complete code in codepen, link at bottom ~)
objectSpanMethod({ row, column, rowIndex, columnIndex }) { // console.log(row, column, rowIndex, ColumnIndex switch (columnIndex) {case 0: // Return this.setTableRowCol(row, rowIndex, [' PRNM ']) case 1: Return this.setTableRowCol(row, rowIndex, [' PRNM ', 'MTNM ']) case 2: return this.setTableRowCol(row, rowIndex, [' PRNM ',' MTNM ']) case 2: Return this.settablerowCol (row, rowIndex, [' PRNM ', 'MTNM ', 'content'])}}, setTableRowCol(row, rowIndex, rowIndex) keys) { let firstIndex = 0, rowspan = 1, FirstIndex = this.tableData.findIndex(item => {return this.filterSameKeys(item, row, Keys)}) if (rowIndex === firstIndex) {// Number of rows to merge rowspan = this.tabledata.filter (item => {return this.filterSameKeys(item, row, Keys)}). Length colspan = 1} else {// The merged rows need to be set to 0 rowspan = 0 colspan = 0} // console.log(key, rowIndex, rowspan, Colspan) return {rowspan, colspan}}, // Merge filterSameKeys(item, row, keys) { let flag = true keys.forEach(key => { flag = flag && item[key] === row[key] }) return flag },Copy the code
  • The row merge is complete
  • Start hover effect. Since the first, second, and third columns are not necessarily on the same row as the current cell, add a class and a background color to the row where the first, second, and third columns will be highlighted
  • Select * from el-table row-class-name, cell-mouse-enter, cell-mouse-leave; select * from el-table row-class-name, cell-mouse-enter, cell-mouse-leave; select * from el-table row-class-name, cell-mouse-enter, cell-mouse-leave; First_row, second_row, third_row
// Select the first, second, and third columns that need to be highlighted CellMouseEnter (row) {this.third_row = this.tableData.filter(item => {return this.filterSameKeys(item, row, ['prnm', 'mtnm', 'content']) })[0] this.second_row = this.tableData.filter(item => { return this.filterSameKeys(item, row, ['prnm', 'mtnm']) })[0] this.first_row = this.tableData.filter(item => { return this.filterSameKeys(item, row, [' PRNM] [0])})}, remove cellMouseLeave / / mouse () {enclosing first_row = {} this. Second_row = {} this. Third_row = {}}, Class tableRowClassName({row}) {let flag1 = this.first_row == row? 'first_row' : '' let flag2 = this.second_row == row? 'second_row' : '' let flag3 = this.third_row == row? 'third_row' : '' return `${flag1} ${flag2} ${flag3}` }Copy the code
  • Finally, style
.el-table { .first_row, .second_row, .third_row { td:nth-child(1) { background: #f5f7fa ! important; First_row. second_row,.second_row.third_row {td:nth-child(2) {background: #f5f7fa ! important; First_row.second_row.third_row {td:nth-child(3) {background: #f5f7fa! important; }}}Copy the code

And you’re done!

  • IO /185942983/p…