最近做的項目中有個合並表頭和內容的表格，覺得新鮮，記錄一下知識點。 要實現的效果如下： 第一行和第二行分別是表頭，第三行和第四行第一列實現多行合並。具體代碼實現如下（代碼是直接摘取項目 ...

最近做的項目涉及到很多單元格合並問題，element-ui組件對於單元格合並的處理雖然很靈活，但是需要事先計算好每個單元格合並的rowspan和colspan，直接在span-method屬性中計算實現起來有點困難，所以我拿到列表后先把每條數據的需要合並的rowspan計算出來然后直接 ...

背景：實現一個通用化表格組件，根據數據驅動動態創建表頭和行數據以及單元格 優點：無需根據業務場景創建多個Table模板適應多個業務。只需配置對應數據。 圖例： 一、改造前element-ui實現方式 我們可以發現，目前數據是針對個人信息定義的 姓名 ...

通過我的測試我發現兩個兩種方法來編輯單元格的內容 第一種點擊編輯： 我是給td里添加一個input，將值賦值給input，當失去焦點的時候將input的值付給td原來的內容，然后將input刪除， 代碼如下： 　let oldel = cell.children ...

接着寫兩個方法--最后一行合計的方法 --單元格合並的方法 先寫一個rowspan方法，計算出spanArr數組是怎么單元格合並的，注意rowspan方法要在渲染完成之前使用，可以在mounted中使用。然后應用到objectSpanMethod方法里面進行單元格合並 ...

最終效果: 能實現雙擊某個單元格顯示input框進而編輯單元格內容, 光標挪出來輸入 ...

...

...