欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年09月13日 16:36:12   作者:zqian1994  
這篇文章主要介紹了使用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外層唯一主鍵,選中后根據主鍵動態(tài)設置類
      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,首次點擊單元格時未出現(xiàn)選中效果;由于已選擇第一種方案,此處未深究,僅做記錄。

 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外層唯一主鍵,選中后根據主鍵動態(tài)設置類
        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}
          }
        }
      }
    },

以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

最新評論