element ui table显示本地图片

深碍√TFBOYSˉ_ 2022-12-15 03:55 282阅读 0赞

*  背景：后端返回一个状态码，需要根据状态码显示对应的本地图片。
 *  第一步：写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]
            }
          ]
        };
      },

*  最终效果如下图所示。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzE5NDczNTI5_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzE5NDczNTI5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a498594e714348e4bdb3fb808650eea7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element UI Table表格封装

说明针对Element UI table进行了简单封装，支持复杂表头、分页、跨行等。主要封装内容如下： pagination：是否分页，默认true co

冷不防/ 2023年01月22日 15:59/ 0 赞/ 475 阅读

相关 Element UI Table合并行

Vue使用Element-ui Table 合并行，官方只是一个非常简单的合并例子，通常业务都是以某个字段进行合并。效果图 ![在这里插入图片描述][watermar

￡神魔★判官ぃ/ 2023年01月14日 11:59/ 0 赞/ 153 阅读

相关 element-ui本地使用

　对于element-ui的使用，官网给了这么一个例子： <!DOCTYPE html> <html> <head> <meta char

小鱼儿/ 2022年12月28日 12:42/ 0 赞/ 230 阅读

相关 element ui table显示本地图片

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

深碍√TFBOYSˉ_/ 2022年12月15日 03:55/ 0 赞/ 283 阅读

相关【element-ui】element ui table获取当前行索引

> `前言` (当前页数-1)\每页条数 + scope.$index + 1 (param.curpageno - 1) param.pagesize + sc

ゝ一纸荒年。/ 2022年10月30日 06:26/ 0 赞/ 44 阅读

相关 element ui 图片删除

<el-upload action="/api/uploads" :file-list="addForm.files" list-type="picture-card"

左手的ㄟ右手/ 2022年10月25日 15:27/ 0 赞/ 169 阅读

相关封装 element-ui el-table

> element-ui el-table功能很强大，也很好用，但是组件写起来有些麻烦，需要进一步封装，下面是一个封装的例子，可以 formatData，可以利用 slot 动

旧城等待，/ 2022年09月16日 14:20/ 0 赞/ 52 阅读

相关【element-ui改变table样式】

特别注意一下问题：首先，因为element-ui的属性是全局的，style不能设置scoped，否则不起作用其次，因为element-ui的属性是全局的，所以如果改

逃离我推掉我的手/ 2021年11月29日 05:48/ 0 赞/ 614 阅读

相关关于element ui popover无法在table显示的问题，

实质是它的v-model属性值需要唯一的一个值来绑定，在table时，可以考虑对数组设置个默认的布尔值转载于:https://www.cnblogs.com/alww/p/

灰太狼/ 2021年10月19日 10:24/ 0 赞/ 280 阅读

相关 element ui-table爬坑

之前在vue中使用element-ui的表格，都是固定的key值，也就是这种情况。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

布满荆棘的人生/ 2021年09月18日 16:34/ 0 赞/ 392 阅读