JeecgBoot table 中 图片

目录

1. 效果图

2. 生成表格

3.  修改前端页面表格列

方式一：

​

customRender: 

方式二：

---

需要在表格中显示图片：记录在表格中显示图片

1. 效果图

2. 生成表格

生成表格的方法可参考官方文档；http://doc.jeecg.com/2043915

或参考我之前的文档：https://blog.youkuaiyun.com/qq_41722795/article/details/105946973

3.  修改前端页面表格列

方式一：

需要显示图片列的代码： 数据库中该字段保存的是 图片的地址

{
            title:'头像',
            align:"center",
            dataIndex: 'headSculpture',
            customRender: function (t,r, index) {
              return <img src={t} style="width: 20px; height: 20px; border-radius: 10px;"/>

            }
          },

customRender: 

自定义渲染函数

方式二：

代码生成器生成的代码table 中一般 含有自带的 图片插槽模板，如果没有  手动加上即可

在需要显示图片的字段， 加入作用域插槽  scopedSlots 

 

在方法中实现图片插槽模板中的函数：

4.  图片设置可预览