elementUI Table的行合併通用方法

2021-10-09 21:19:16 字數 983 閱讀 9983

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

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

data() ,,,]

};},created(),

methods: )

}}

通用合併的方法mergetablerow,如果相同的資料不在相鄰行,請看最下面那個方法

/**

* 方法一

* table合併行通用 */

export function mergetablerow(data, merge)

merge.foreach((m) =>

data = data.map((v, index) =>

} else

}return v

})})

return data

}

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

/**

* 方法二

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

* table合併行通用 */

export function mergetablerow(data, merge)

merge.foreach((m) =>

data = data.map((v, index) =>

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