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