因為工作需要需要開發一個表格,列固定,但是行需要合並,而且不固定需要根據返回數據動態顯示隱藏,樣子如下: 行的分類可能有或者沒有,可能有公務員領導職務分類或者沒有,沒有的話就不會顯示它的數據。 el-table官方文檔 看官方文檔使用的方法就是span-method, 詳細部分請 ...
實現效果 親測有效 數據純屬虛構 表格標簽 獲取表格數據 從后端 數據整理 表格的span method綁定方法 在mounted中加載方法 另外mock數據: ...
2021-01-22 16:09 0 732 推薦指數:
因為工作需要需要開發一個表格,列固定,但是行需要合並,而且不固定需要根據返回數據動態顯示隱藏,樣子如下: 行的分類可能有或者沒有,可能有公務員領導職務分類或者沒有,沒有的話就不會顯示它的數據。 el-table官方文檔 看官方文檔使用的方法就是span-method, 詳細部分請 ...
一、場景 根據接口返回數據,將ID相同的數據進行合並。 el-table自帶的方法可以固定的合並,但是不能夠隨機分。 二、思路 先將查詢出的列表數據分出哪幾列以及哪幾行需要進行合並,並且合並多少行或多少列;如spanArr 再將這些數據記錄(spanArr)放進一個空數組中,合並 ...
在el-table的官方組件中並沒有看到具體的合並行或者列及自定義表格內容,於是就自己寫了一個效果如下所示。 這種對左側內容要求比較高,要求行合並,並要自定義一些內容。下面說一下具體方法及代碼寫法。 我這個表格自定義內容比較多所以自己用的時候可以按照自己的具體要求適當刪改,修剪 ...
動態的合並而不是固定怎么合並的,所以這時就需要我們對其進行處理。 大致思路就是:先將查詢出的列表數據 ...
前言 要實現的效果如下,既有行合並,又有列合並。注意:最后的合計行10是自己計算的,並不是table組件計算的,我這里直接寫data上了,廢話不多說,上代碼! 代碼可復制到https://codepen.io/pen/這里運行查看效果 html部分 css ...
首先這是效果~ 由於數據需要保密~我就把左邊數據去掉啦,解釋一下,第一列是company,第二列是company相同的另一個數據名稱~ 我這里是根據每一個數據中的company的名字來判斷是否是屬於在同一個分類下的~ 如果是同一個名字就把這幾個數據全部划分在這個分類下 ...