element ui table显示本地图片

背景：后端返回一个状态码，需要根据状态码显示对应的本地图片。
第一步：写column。
- 注意前面要加一截路径，比如这里…/assets/

<el-table :data="tableData" border style="width: 80%"  >
...省略...<el-table-column prop="warningLevel" label="预警等级"><!-- 图片的显示 --><template   slot-scope="scope">            <el-image   :src="require('../assets/'+scope.row.warningLevel)"   /> </template> </el-table-column>
...省略...
</el-table>

第二步：填充模拟数据。

  var alarmMap = new Array();alarmMap[0] = "logo.png";
export default {data() {return {tableData: [{id: 1,hull: "目标船体",behavior: "行为类别",area: "行为区域",equipmentNmea: "监控设备名称",date: "发生时间",speed: "传速",duration: "已停留时长",warningLevel:  alarmMap[0]}]};},

最终效果如下图所示。

element ui table显示本地图片相关推荐

element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
(转)Silverlight显示本地图片、Stream转Byte数组
转载自:http://www.cnblogs.com/forgetu/archive/2010/08/07/silverlight-load-local-image-stream-to-byte-ar ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
在InternetExplorer.Application中显示本地图片
忘记了,喜欢一个人的感觉 Demon's Blog » 程序设计 » 在InternetExplorer.Application中显示本地图片 « 对VBS效率的再思考--处理二进制数据 Wo ...
c# picturebox控件显示本地图片和显示网上的图片
显示本地图片 pictureBox1.Image=Image.FormFile(@"图片路径"); 显示网络图片 pictureBox1.ImageLocation = @&quo ...
Android 使用开源库StickyGridHeaders来实现带sections和headers的GridView显示本地图片效果...
转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/20481185),请尊重他人的辛勤劳动成果,谢谢! 大家好! ...
Android 使用ContentProvider扫描手机中的图片，仿微信显示本地图片效果
转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/18730223),请尊重他人的辛勤劳动成果,谢谢! 写这篇文 ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...

element ui table显示本地图片

element ui table显示本地图片相关推荐

最新文章

热门文章