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

創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們?cè)诠ぷ魃厦芮信浜希瑥膭?chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對(duì)我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、電商網(wǎng)站開發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開發(fā)。

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

const columns = [ {
 title: "姓名",
 dataIndex: "name",
 width: 100 , // table列定寬 可不設(shè)
  fixed: "left" // 固定列的位置
 },
 {
 title: "聯(lián)系電話",
 width: 150,
 dataIndex: "phone"
 },
 {
 title:"顯示一張圖片",
 width:150，
 dataIndex:"img"，
 render：(text)=> <img src={text}/>
 },
 {
 title:"顯示多張圖片",
 width:400，
 dataIndex:"imgs"，
 render: text => {
 // text是后端傳的多個(gè)url，需要逗號(hào)分隔再顯示圖片
  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(); // 點(diǎn)擊放大圖片
     }}
     />
    </div>
    );
   })}
   </div>
  );
  }
 },
]

// 點(diǎn)擊放大圖片預(yù)覽
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 表格滾動(dòng)
<Table columns={columns} scroll={{ x: 1500, y: 500 }} /> 

網(wǎng)站標(biāo)題：使用reactantd實(shí)現(xiàn)在表格中渲染一張或多張圖片-創(chuàng)新互聯(lián)
文章源于：http://www.chinadenli.net/article12/dpohgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、服務(wù)器托管、網(wǎng)站改版、全網(wǎng)營(yíng)銷推廣、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)

廣告

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