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

这篇文章主要介绍了使用vxe-table合并单元格后增加选中效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

目录

• vxe-table合并单元格后增加选中效果
• 相关单元格全部选中
• vxe-table自动合并单元格

vxe-table合并单元格后增加选中效果

<vxe-table
      :data="retrievalList"
      :row-class-name="setRowClass"
       @cell-click="selectRow">
     <vxe-column field="name" title="姓名"></vxe-column>
</vxe-table>

后端返回的JSON格式 (合并单元格需要对数据处理后，通过setMergeCells合并)

注：

相关单元格全部选中

效果图：

 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;
      }
}

所选单元格整体增加背景色，但仅选中单元格特殊标识

注 ：

（1）第一列被合并单元格选中样式默认跟随合并后的第一行。

（2）可自行变形，使首列单元格底色与单项选中的单元格一致。

（3）此处存在个BUG，首次点击单元格时未出现选中效果；由于已选择第一种方案，此处未深究，仅做记录。

 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;
        }
      }
}

vxe-table自动合并单元格

<vxe-table
    @cell-click="handleClickCell"
    :span-method="spanMethods"  //自动合并单元格
    :data="tableData2">
</vxe-table>
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}
          }
        }
      }
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• vue 中使用 vxe-table 制作可编辑表格的使用过程
• vue+el-table实现合并单元格
• vxe-table vue table 表格组件功能