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", '');
                            }
                           
                        }
                    },

 

posted on 2019-04-11 16:09  菜鸟正在进化  阅读(3682)  评论(1编辑  收藏  举报