ag-grid 表格中添加圖片

ag-grid是一種很是好用的表格，網上搜索會有各類各樣的基本用法，不過對於在ag-grid 表格中添加圖片我沒有找到方法，看了官方的文檔，固然英文的本身也是靠網頁翻譯，最後發現有這麼一個例子，我知道我找到了：

看了說明發現很詳細不過也很囉嗦，能夠在https://www.ag-grid.com/javascript-grid-cell-rendering-components/#grid-vs-component-refresh看具體的說明，別急，我直接告訴你簡單的方法：

首先能夠利用 cellRenderer 來實現，好比在照片這一列中展現的是一組圖片（最多展現四張）：

代碼爲：

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;
},

數據格式爲：

 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數組。

效果圖爲：

注：圖片連接來自網絡