亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

element實現(xiàn)合并單元格通用方法

 更新時間:2019年11月13日 09:37:41   作者:i大俊  
這篇文章主要介紹了element實現(xiàn)合并單元格通用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

主要思路:

  1. 對數(shù)據(jù)進行處理,寫了一個getSpanData通用方法。
  2. 用api中提供的span-method方法。

span-method方法用法:

通過給table傳入span-method方法可以實現(xiàn)合并行或列,方法的參數(shù)是一個對象,里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組,第一個元素代表rowspan,第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。

通用實例

demo.vue

  <el-table
   v-loading="loading"
   ref="singleTable"
   :data="tableData"
   :span-method="handleObjectSpanMethod"
   highlight-current-row
   border
   style="width: 100%;margin-top:10px;"
   max-height="730"
  >

JavaScript

 // 查詢列表
 queryTableList() {
  getNeeds().then(res => {
   if (res.code === 0) {
   // 表格數(shù)據(jù)
    this.tableData = res.data
    // 對表格數(shù)據(jù)進行處理,找出需要合并的單元格
    this.getSpanData(this.tableData)
   } 
  })
 },
// 計算需要合并的單元格
getSpanData(data) {
 // 存放計算好的合并單元格的規(guī)則
 this.spanData = []
 for (var i = 0; i < data.length; i++) {
  if (i === 0) {
   this.spanData.push(1)
   this.pos = 0
  } else {
   // 判斷當前元素與上一個元素是否相同
   if (data[i].realOpenDate === data[i - 1].realOpenDate) {
    this.spanData[this.pos] += 1
    this.spanData.push(0)
   } else {
    this.spanData.push(1)
    this.pos = i
   }
  }
 }
}
// 合并單元格
handleObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
 // 需要合并的列
 // [0, 1, 2].includes(columnIndex ), 表示合并前三列
 if (columnIndex === 1) {
  const _row = this.spanData[rowIndex]
  const _col = _row > 0 ? 1 : 0
  return {
   rowspan: _row,
   colspan: _col
  }
 }
}

getSpanData中spanData處理后的結構:

數(shù)組中12的值表示需要合并的地方,很好理解,就是找到每行中columnIndex對應要合并的位置。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • vue3中各種類型文件進行預覽功能實例

    vue3中各種類型文件進行預覽功能實例

    在vue移動端項目中經(jīng)常遇到這樣的需求,對一些上傳的附件可以點擊之后在線預覽,所以下面這篇文章主要給大家介紹了關于vue3中各種類型文件進行預覽功能的相關資料,需要的朋友可以參考下
    2021-09-09
  • Vue實現(xiàn)購物車功能

    Vue實現(xiàn)購物車功能

    本篇文章主要分享了Vue實現(xiàn)購物車功能的實例代碼。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解)

    vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解)

    這篇文章主要介紹了vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-01
  • Vue保持用戶登錄狀態(tài)(各種token存儲方式)

    Vue保持用戶登錄狀態(tài)(各種token存儲方式)

    本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲方式),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue?如何綁定disabled屬性讓其不能被點擊

    vue?如何綁定disabled屬性讓其不能被點擊

    這篇文章主要介紹了vue?如何綁定disabled屬性讓其不能被點擊,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 手寫實現(xiàn)vue2下拉菜單dropdown組件實例

    手寫實現(xiàn)vue2下拉菜單dropdown組件實例

    這篇文章主要為大家介紹了手寫vue2下拉菜單dropdown組件實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • vue組件(全局,局部,動態(tài)加載組件)

    vue組件(全局,局部,動態(tài)加載組件)

    組件是Vue.js最強大的功能之一。組件可以擴展HTML元素,封裝可重用的代碼。這篇文章主要介紹了vue組件(全局,局部,動態(tài)加載組件),需要的朋友可以參考下
    2018-09-09
  • Vue打包后不同版本詳細解析

    Vue打包后不同版本詳細解析

    vue項目打包是我們日常經(jīng)常遇到的,下面這篇文章主要給大家介紹了關于Vue打包后不同版本詳細解析的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-12-12
  • 安裝VUE-CLI一直失敗的排錯過程及解決方案

    安裝VUE-CLI一直失敗的排錯過程及解決方案

    這篇文章主要介紹了安裝VUE-CLI一直失敗的排錯過程及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 解決VUE框架 導致綁定事件的阻止冒泡失效問題

    解決VUE框架 導致綁定事件的阻止冒泡失效問題

    下面小編就為大家分享一篇vue監(jiān)聽滾動事件 實現(xiàn)某元素吸頂或者固定位置顯示方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02

最新評論