螞蟻金服的design Vue表格 動態合併程式碼詳情!

眾合網1143561141發表於2020-12-21

你好!我們本次合併表格是實現的列 合併 rowSpan
在上程式碼 之前 我們先講一下表格
Ui框架:
1、Vue
2、Ant design Vue

表格:
1、行是 colSpan
2、列是 rowSpan
design 表格的title 是不計算 索引的 !

完成效果:
在這裡插入圖片描述

舉例:我們以紅框選中列做相同資料合併
在這裡插入圖片描述
1、Vue 展示 Ant table 程式碼
在這裡插入圖片描述
2、展示 data 資料
在這裡插入圖片描述
3、vue 匯出程式碼
在這裡插入圖片描述
4、methods 方法裡面實現 rowSpan
1、 注意 這裡 key 是傳值 宣告方法的時候可以後寫
2、使用的時候 在 mounted 裡面呼叫即可
在這裡插入圖片描述
5、customRender 實現合併
在這裡插入圖片描述


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69979681/viewspace-2743918/,如需轉載,請註明出處,否則將追究法律責任。

相關文章