使用vxe-table合并单元格后增加选中效果_vue.js_

 data() { return { sourceList: [], // 后端返回的JSON数据 retrievalList: [], // 格式化后的数据 [{},{},{}] } }, methods: { // 设置已选中的单元格类名 setRowClass({row}) { // patId为JSON外层唯一主键，选中后根据主键动态设置类 if (row.patId === this.currentRow.patId) { return 'current-pat'; } }, // 单击选中 selectRow({row}) { // 获取当前合并的单元格整体信息，此处为多条数据的集合 this.currentRow = this.sourceList.find(item => item.patId === row.patId); } } 

// scss .vxe-table { .current-pat, .current-pat > td { background-color: #CBECFC !important; } } 

 data() { return { sourceList: [], // 后端返回的JSON数据 retrievalList: [], // 格式化后的数据 [{},{},{}] } }, methods: { // 设置行类名 setRowClass({row}) { if (row.itemId === this.firstItemId) { // itemId为JSON内层nurseOptPatVoList内唯一主键，用于设置被合并列单元格底色 return 'current-first' } else if (row.patId === this.currentRow.patId) { // patId为JSON外层唯一主键，选中后根据主键动态设置类 return 'current-pat' } }, // 单击选中 selectRow({row}) { // 获取当前合并的单元格整体信息，此处为多条数据的集合 this.currentRow = this.sourceList.find(item => item.patId === row.patId); // 获取当前合并的单元格首条信息 let firstItem = this.retrievalList.find(item => item.patId === row.patId); this.firstItemId = firstItem.itemId; } 

.vxe-table { .current-pat { background-color: #f00; } .current-first { // 此处不使用important是为了避免背景与选中效果冲突 background-color: #f00; & > .vxe-body--column:first-child { background-color: #f00 !important; } } } 

 spanMethods({row, $rowIndex, column, data}){ let fields = ["pcsname", "fjname"] let cellValue = row[column.property] if (cellValue && fields.includes(column.property)) { let prevRow = data[$rowIndex - 1] let nextRow = data[$rowIndex + 1] if (prevRow && prevRow[column.property] === cellValue) { return {rowspan: 0, colspan: 0} } else { let countRowspan = 1 while (nextRow && nextRow[column.property] === cellValue) { nextRow = data[++countRowspan + $rowIndex] } if (countRowspan > 1) { return {rowspan: countRowspan, colspan: 1} } } } },