ag-grid是一種非常好用的表格，網(wǎng)上搜索會(huì)有各種各樣的基本用法，不過對于在ag-grid 表格中添加圖片我沒有找到方法，看了官方的文檔，當(dāng)然英文的自己也是靠網(wǎng)頁翻譯，最后發(fā)現(xiàn)有這么一個(gè)例子，我知道我找到了：

看了說明發(fā)現(xiàn)很詳細(xì)不過也很啰嗦，可以在https://www.ag-grid.com/javascript-grid-cell-rendering-components/#grid-vs-component-refresh看具體的說明，別急，我直接告訴你簡單的方法：

首先可以利用?cellRenderer 來實(shí)現(xiàn)，比如在照片這一列中展示的是一組圖片（最多展示四張）：

代碼為：

cellRenderer: function(params) {let array = params.value;var resultElement = document.createElement("span");var Length = array.length;Length>4?Length=4:Length;for (var i = 0; i < Length; i++) {var imageElement = document.createElement("img");imageElement.src = array[i].url;imageElement.style.width = 30+'px';imageElement.style.height = 30+'px';imageElement.style.marginLeft = 5+'px';resultElement.appendChild(imageElement);}return resultElement; },

數(shù)據(jù)格式為：

finishDate:[{url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471521n.jpg'},{url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471611n.jpg'},{url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471611n.jpg'},{url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471611n.jpg'},{url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471611n.jpg'} ],

需要注意的是這里的params.value才指的是finishDate數(shù)組。

效果圖為：

注：圖片鏈接來自網(wǎng)絡(luò)

轉(zhuǎn)載于:https://www.cnblogs.com/wy120/p/10238874.html

總結(jié)

以上是生活随笔為你收集整理的ag-grid 表格中添加图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。