iview的table顯示圖片和點擊放大圖片


1、在table中顯示圖片

(1)只有一張圖片 即返回的是String類型

                 {
                        title: '附件',
                        key: "image",
                        render: (h, params) => {
                            let _img = params.row.image?config.default.baseUrl.dev+'/'+params.row.image:'';
                            return h('img',  {
                                attrs: {
                                    src: _img, 
                                    style: 'width: 40px;height: 40px;'
                                },
                            },);
                        }
                    },                

應該用attrs而不是 props.

(2)循環多張圖片 即返回的是Array類型

                {
                        title: '附件',
                        key: "image",
                        render: (h, params) => {
                            let imgs = params.row.image;
                            return h('div',imgs.map(item=>{
                                 return h('img',  {
                                    attrs: {
                                        src: item, 
                                        style: 'width: 40px;height: 40px;'
                                    },
                                },);
                            }),)

                           
                        }
                    },
        

2、不僅在表格中顯示圖片,還要點擊放大圖片,還是用Viewer

 {
                        title: '附件',
                        key: "image",
                        render: (h, params) => {
                            let _img = params.row.image?config.default.baseUrl.dev+'/'+params.row.image:''; //因為現在后台返回來的只有一張圖片,String類型。
                            let imgs = [_img];//組裝成 數組
                            if(_img){
                                return h('viewer', {
                                    props:{
                                        images:imgs //數組
                                    }
                                }, imgs.map(img=>{ //循環顯示
                                    return h('img',  {
                                            attrs: {
                                                src: img, 
                                                style: 'width: 40px;height: 40px;'
                                            },
                                        },);
                                })
                                )
                            }else{
                                return h("span", '');
                            }
                           
                        }
                    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM