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 jsonif(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的虚拟目录,当然也可以使用使用本地文件目录。
这样只要后台传过来的文件路径没问题就能展示出来图片,但是要注意一下图片的大小。
iview在table中添加图片相关推荐
- 在iview的Table中添加Select(render)
首先对Render进行分析,在iview官方的文档中,找到了table插入Button的例子: [javascript] view plaincopy { title: 'Action', key: ...
- Latex在表格中添加图片
1.不添加图片 \end{table} \begin{table}[h]\caption{Name of this table}\centering\begin{tabular}{ | c | l | ...
- 初次使用Android Studio问题,Android Studio往项目中添加图片
2019独角兽企业重金招聘Python工程师标准>>> 习惯了iOS往项目中直接拖拽的图片的习性,第一次往Android Studio中添加图片为难了,怎么也拖拽不进去,为难了,研究 ...
- java 图片动画_java在窗口中添加图片做动画,怎么一闪一闪的?
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 视频来自:优酷 在java中添加图片做动画效果,怎么一闪一闪的运动啊?怎样才能让它不闪的连续运动呢? 下面是代码,代码项目project里有两个类,一个是 ...
- 【Github】怎么在README.md中添加图片?
原理是将图片作为文档上传,在README.md中引用即可. 参考博客:[GitHub]给GitHub上的ReadMe.md文件中添加图片怎么做 . gitHub创建文件夹
- ag-grid 表格中添加图片
ag-grid是一种非常好用的表格,网上搜索会有各种各样的基本用法,不过对于在ag-grid 表格中添加图片我没有找到方法,看了官方的文档,当然英文的自己也是靠网页翻译,最后发现有这么一个例子,我知道 ...
- 如何在ps中添加图片上的塑料布效果
1.塑料滤镜能够产生一种在照片表面蒙上一层塑料布的效果,接下来讲讲如何在ps中添加图片上的塑料布效果.打开PS,把素材导入PS中,Ctrl+J,复制一层图层,选择钢笔工具,将途中人物腰部一下的裙摆抠出 ...
- 在视频中添加图片,图片中添加视频,制作画中画效果
在剪辑中,画中画是一种非常常见的视频表现手法,它在视频或图片上添加一个比尺寸小的剪辑画面,那么这些剪辑画面可以进行缩放,加强视频内容的生动性.下面一起来试试吧. 方法1:视频中添加图片 在媒体梦工厂的 ...
- echarts 环状图中添加图片
echarts 环状图中添加图片 由于业务需要,我们可以在饼图内加入图片.图标或文字等让单调的饼图变得美观,这里我是在环状图里添加图片. 代码如下: option = {graphic: {//图形中 ...
最新文章
- [css] css的负边距有哪些应用场景?
- 远程计算机关闭了怎么办,怎么远程关闭电脑 远程关闭电脑方法【详细步骤】...
- css3媒体查询尺寸
- Xcode因为证书问题经常报的那些错
- iOS 人民币符号与日圆符号的混淆
- DAG最小可重路径覆盖or最长反链的一种做法
- 明小子注入工具+啊D注入工具+御剑后台扫描工具+中国菜刀一句话木马
- TFWmodi-修改tfw文件
- 【NOI2015】bzoj4199 品酒大会【解法一】
- 避免企业IT外包服务风险三大要素
- 富爸爸系列全集图书清单
- 谷歌浏览器f12功能修改服务器代码,Chrome(谷歌)控制台,console实用教程
- windows下php连接Oracle配置
- 通俗版:“什么是ERP” -----文章出处:51testing论坛
- -wl,-soname的作用
- LOOPS HDU - 3853 dp求期望值
- Flink分支——Blink的第一次使用
- java——创意图形项目总结
- python气象分析
- 【openfire,smack使用总结】--Smack库的使用
热门文章
- IE浏览器提示代理服务器没有响应,但是360浏览器可以用
- health HEALTH_WARN;352 pgs degraded;352 pgs stuck unclean;352 pgs undersized;recovery 20/40 objects
- 饿了么开放平台接入(1)——开放平台注册与使用
- Pinia——Actions
- 直播运营-直播抠图效果完整展示
- Cubic interpolation
- mysql 复合索引 悲观锁_对MySQL索引、锁及事务的简单分析
- Linux驱动开发---杂项设备
- 输入商品显示商品名称和价格
- 知名卸载软件Revo Uninstaller Pro挑战Deep Freeze卸载动画视频教程