快捷導(dǎo)航

使用vxe-table合并單元格后增加選中效果

更新時(shí)間：2022年09月13日 16:36:12 作者：zqian1994

這篇文章主要介紹了使用vxe-table合并單元格后增加選中效果，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vxe-table合并單元格后增加選中效果

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

后端返回的JSON格式 (合并單元格需要對數(shù)據(jù)處理后，通過setMergeCells合并)

注：

相關(guān)單元格全部選中

效果圖：

 data() {
    return {
    	sourceList: [],  //  后端返回的JSON數(shù)據(jù)
        retrievalList: [],  //  格式化后的數(shù)據(jù) [{},{},{}]
    }
 },
 methods: {
	//  設(shè)置已選中的單元格類名
    setRowClass({row}) {
      //  patId為JSON外層唯一主鍵，選中后根據(jù)主鍵動(dòng)態(tài)設(shè)置類
      if (row.patId === this.currentRow.patId) {
        return 'current-pat';
      }
    },
    //  單擊選中
    selectRow({row}) {
      //  獲取當(dāng)前合并的單元格整體信息，此處為多條數(shù)據(jù)的集合
      this.currentRow = this.sourceList.find(item => item.patId === row.patId);
    }
 }

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

所選單元格整體增加背景色，但僅選中單元格特殊標(biāo)識

注：

（1）第一列被合并單元格選中樣式默認(rèn)跟隨合并后的第一行。

（2）可自行變形，使首列單元格底色與單項(xiàng)選中的單元格一致。

（3）此處存在個(gè)BUG，首次點(diǎn)擊單元格時(shí)未出現(xiàn)選中效果；由于已選擇第一種方案，此處未深究，僅做記錄。

 data() {
    return {
    	sourceList: [],  //  后端返回的JSON數(shù)據(jù)
        retrievalList: [],  //  格式化后的數(shù)據(jù) [{},{},{}]
    }
 },
 methods: {
	//  設(shè)置行類名
    setRowClass({row}) {
      if (row.itemId === this.firstItemId) {
      	//  itemId為JSON內(nèi)層nurseOptPatVoList內(nèi)唯一主鍵，用于設(shè)置被合并列單元格底色
        return 'current-first'
      } else if (row.patId === this.currentRow.patId) {
        //  patId為JSON外層唯一主鍵，選中后根據(jù)主鍵動(dòng)態(tài)設(shè)置類
        return 'current-pat'
      }
    },
    //  單擊選中
    selectRow({row}) {
      //  獲取當(dāng)前合并的單元格整體信息，此處為多條數(shù)據(jù)的集合
      this.currentRow = this.sourceList.find(item => item.patId === row.patId);
      //  獲取當(dāng)前合并的單元格首條信息
      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自動(dòng)合并單元格

<vxe-table
    @cell-click="handleClickCell"
    :span-method="spanMethods"  //自動(dòng)合并單元格
    :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}
          }
        }
      }
    },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: