iview在table中某一列添加图片

我们知道iview的table封装的太好,如果只是展示数据简直不要太简单,但是比如合并单元格就很麻烦,而我要做的是在table中添加图片
建议大家先看一下这个:https://www.iviewui.com/components/table#column
我们要用的是render函数,因为我用了很多表格,所以我把表头的加载封装了一下,大家也可以试用一下
首先是从数据库中读出来的表头title和key数组(单独写一张表)
在这里插入图片描述
这里先看一下我调用后台接口收到的数据类型:
在这里插入图片描述
是一个List集合,可以看到属性名和前面得到的key数组是包含的关系,这样我们在表头封装的时候就能合理控制哪些需要展示,不展示的直接在数据库中修改状态值
好了,下面是表头封装的函数:

function showCol(title,key){
    var col = new Array()
    // 字段名
    for(var i=0;i<title.length;i++){
        var json
        if(key[i]=="fileUrl"){
            json = {
                title : title[i],
                key : key[i],
                align: 'center',
                render:(h,params)=>{
                    return h('img',{
                        attrs:{
                            src: params.row.fileUrl, style: 'width: 100px;border-radius: 2px;'
                        },
                    })
                }
            }
        }else{
            json = {
                title : title[i],
                key : key[i],
                align: 'center',
            }
        }
        col.push(json)
    }
    return col
}

根据传进来的表头数组逻辑判断哪一列需要利用render函数进行渲染,在这里一般需要配置一下Tomcat的虚拟目录,当然也可以使用使用本地文件目录。
这样只要后台传过来的文件路径没问题就能展示出来图片,但是要注意一下图片的大小。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值