使用reactantd實現在表格中渲染一張或多張圖片-創(chuàng)新互聯

本篇文章為大家展示了使用react antd實現在表格中渲染一張或多張圖片，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯的客戶來自各行各業(yè)，為了共同目標，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領域包括成都網站建設、成都網站制作、電商網站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

使用antd table中顯示一張圖片，代碼如下：

const columns = [ {
 title: "姓名",
 dataIndex: "name",
 width: 100 , // table列定寬 可不設
  fixed: "left" // 固定列的位置
 },
 {
 title: "聯系電話",
 width: 150,
 dataIndex: "phone"
 },
 {
 title:"顯示一張圖片",
 width:150，
 dataIndex:"img"，
 render：(text)=> <img src={text}/>
 },
 {
 title:"顯示多張圖片",
 width:400，
 dataIndex:"imgs"，
 render: text => {
 // text是后端傳的多個url，需要逗號分隔再顯示圖片
  if (text) {
  return (
   <div style={{ display: "flex" }}>
   {text.split(",").map((items, index) => {
    return (
    <div
     key={index}
     className="common-img-list"
     style={{
     width: "100px",
     height: "100px",
     marginLeft: "4px",
     overflow: "hidden"
     }}
    >
     <img
     style={{ width: "100%" }}
     src={items}
     onClick={() => {
      InitImageViwer(); // 點擊放大圖片
     }}
     />
    </div>
    );
   })}
   </div>
  );
  }
 },
]

// 點擊放大圖片預覽
function InitImageViwer(
 box = 'common-img-list', // 注意class不要忘記了
 option = {},
 callBack
) {
 setTimeout(() => {
 const viewList = []
 const el = document.querySelectorAll(`.${box}`)
 if (el.length) {
  el.forEach((z, x) => {
  viewList[x] = new ImageViewer(z, option)
  })
  callBack && callBack(viewList)
 }
 }, 1000)
}

// table 使用 scroll 表格滾動
<Table columns={columns} scroll={{ x: 1500, y: 500 }} /> 

網站標題：使用reactantd實現在表格中渲染一張或多張圖片-創(chuàng)新互聯
文章源于：http://bm7419.com/article12/dpohgc.html

成都網站建設公司_創(chuàng)新互聯，為您提供品牌網站設計、服務器托管、網站改版、全網營銷推廣、外貿網站建設、移動網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯