elementUI Table的行合併通用方法

2021-09-23 22:29:30 字數 1405 閱讀 1859

有些業務需求是需要table進行行合併的,所以就寫了個通用的方法來處理,廢話不多說,先上圖

首先是內部使用el-table的方法:span-method='objectspanmethod'

data() ,,,]

};},created())

// 例如:如果firstmerge: 'checkroom'合併了三行,受影響的列也應該是最多合併三行,請看下圖1

// 例如:如果firstmerge: 'checkmoney'合併了兩行,受影響的列也應該是最多合併兩行,請看下圖2

通用合併的方法mergetablerow,請看最下面那個方法二

⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇由於好多人都不看全文章,方法一已經廢棄⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇

如果相同的資料不在相鄰行該怎麼辦呢?那麼請看下面的**,改良過後的,不相鄰的資料相互之間不受影響

/**

* 方法二

* 改良後(不相鄰的資料相互不受影響)

* table合併行通用 */

export function mergetablerow(config) = config

if (!mergecolnames || mergecolnames.length === 0)

mergecolnames.foreach((m) =>

data = data.map((v, index) => ).length !== 0

const mcflag = mergecolnames.filter((mc) => ).length === 0

if ((mcflag && flag) || (flag && data[index][firstmerge + '-span'] && data[index][firstmerge + '-span'].rowspan === 1))

} else

mlist[rowval]['num']++

mlist[rowval]['newindex']++

}} else

v[m + '-span'] =

}return v

})})

return data

}

注:由於資料沒有進行排序,所以要求後端返回的資料需要相同的在一塊,要不會出現行錯亂現象

element ui table的使用記錄

table table 用於展示多條結構類似的資料,可對資料進行排序 篩選 對比或其他自定義操作。element ui 中table 部分鏈結 最近在做表單,用到了element ui中的 目前就工作中遇到的幾個問題詳細記錄一下 table 固定表頭 官網上其實已經有詳細的說明了,那就是給table...

Element UI table排序問題

專案需求 選擇框與 的排序列雙向繫結 選擇器 表頭行 placeholder 請選擇 el option el select ref singletable data tabledata default sort tableattribute.sortmethod sort change chang...

elementUI table選中問題

首先說一下我的問題 table可以翻頁,可以選中,選中之後翻頁回來需要預設勾選已經選中的。解決 首先監聽table的選中狀態,用 select,這樣選中的資料不會被清空,在table翻頁請求之後,用 select 監聽的資料和請求後的資料做對比,如果一樣,this.refs.multipletabl...