开门见山,话不多说,要在表格中添加图片,可以使用td:

<table class="table-style" border="" width="100%">
<tr class="tr-style first-style-thetd" >
<td>巡查时间</td>
<td>巡查人</td>
<td>巡查地点</td>
<td>点击查看详情</td>
</tr>
<tr v-for="columns1 in data1" class="tr-style tr-style-even second-style-thetd">
<td>{{columns1.col1}}</td>
<td>{{columns1.col2}}</td>
<td>{{columns1.col4}}</td>
<td class="last-td">
<img class="img-cur" src="../../../../assets/images/mapicon.png" alt="查看" @click="menu2('/')">
</td>
</tr>
</table>

而且准确、简单。

  如果想要在iview的table中添加图片,也肯定是可以的,简单的使用代码如下:

  {
    title: '点击查看详情',
    key: 'options',
    align: 'center',
    width: 110,
    render: (h) => {
      return h('img', {
        attrs: {
          src: '../../../../assets/images/mapicon.png',
        },
        style: {
          marginRight: '5px'
        },
        on: {
          click: () => {
            this.menu2('/');
          }
        }
      });
    }
  }

需要注意的是:

  这里的图片地址用的是attrs而不是props。

iview+vue 表格中添加图片的更多相关文章

  1. ag-grid 表格中添加图片

    ag-grid是一种非常好用的表格,网上搜索会有各种各样的基本用法,不过对于在ag-grid 表格中添加图片我没有找到方法,看了官方的文档,当然英文的自己也是靠网页翻译,最后发现有这么一个例子,我知道 ...

  2. Flex表格中添加图片

      Flex4.5中datagrid加入图片显示image <s:DataGrid id="maingrid" x="0" y="36" ...

  3. 在RichTextBox控件中添加图片和文字

    public void SetText(RichTextBox rtb) { rtb.Text = "在RichTextBox控件中添加图片和文字" + Environment.N ...

  4. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  5. ArcMap图层属性表中添加图片

    一看标题是不是有点懵?懵就对了!刚接触到的时候我也有点懵,属性表不是都是文本啊数字啊之类的格式,怎么还可以存图片,下面就带大家来看看吧! 一.关于图层入库问题 图层进入数据库和图层以shp格式存储时, ...

  6. 关于在Silverlight中添加图片的问题

    在Silverlight中添加图片,目前支持的Image格式有jpg和png两种,如何在目录中添加,有些什么技巧呢? <StackPanel Background="White&quo ...

  7. vue+element-ui中的图片获取与上传

    vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...

  8. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  9. 如何在github的README.md中添加图片

    如何在github的README.md中添加图片 总结: 链接引用:![Image text](图片的链接地址) 简介: 1.在github上的仓库建立一个存放图片的文件夹,文件夹名字随意.如:img ...

随机推荐

  1. oracle创建sequence序列语法

    在oracle中sequence就是序号,每次取的时候它会自动增加.sequence与表没有关系 1.create sequence create sequence SEQ_LOG_ID minval ...

  2. Netty之SubPage级别的内存分配

    SubPage 级别的内存分配: 通过之前的学习我们知道, 如果我们分配一个缓冲区大小远小于page, 则直接在一个page 上进行分配则会造成内存浪费, 所以需要将page 继续进行切分成多个子块进 ...

  3. Zookeeper---作为服务注册中心

    认识Zookeeper是一套分布式协调服务. 优点: 简单:与文件系统类似,Znode的组织方式. 多副本:一般再线上都是三副本或者五副本的形式,最少会有三个节点. 有序:有序的操作,根据时间戳进行排 ...

  4. P2747 [USACO5.4]周游加拿大Canada Tour

    题目描述 你赢得了一场航空公司举办的比赛,奖品是一张加拿大环游机票.旅行在这家航空公司开放的最西边的城市开始,然后一直自西向东旅行,直到你到达最东边的城市,再由东向西返回,直到你回到开始的城市.除了旅 ...

  5. P4036 [JSOI2008]火星人(splay+hash+二分)

    P4036 [JSOI2008]火星人 Splay维护hash,查询二分 $a[x].vl=a[lc].vl*ha[a[rc].sz+1]+a[x].w*ha[a[rc].sz]+a[rc].vl$ ...

  6. Mint-Linux【最佳】【快速】安装微信、企业微信、TIM、QQ等软件

    废话不多说 直接上教程 注意看 方式一.在线安装 在本地目录下.如 /home/root/Document 直接使用在线安装脚本,安装最新的Release版本: wget -qO- https://r ...

  7. Freeswitch Tutorial

    I. Install Freeswitch 1) FreeSWITCH Explained https://freeswitch.org/confluence/ https://freeswitch. ...

  8. read - 在文件描述符上执行读操作

    概述#include <unistd.h> ssize_t read(int fd, void *buf, size_t count); 描述read() 从文件描述符 fd 中读取 co ...

  9. Redis和Ehcached的区别

    Redis 属于独立的运行程序,需要单独安装后,使用JAVA中的Jedis来操纵.因为它是独立,所以如果你写个单元测试程序,放一些数据在Redis中,然后又写一个程序去拿数据,那么是可以拿到这个数据的 ...

  10. es6 新语法分享给爱前端的伙伴

    相信es6大家并不陌生,那么我还是简单介绍一下es6,es是15年发布的,可以用babel转化成es5可以支持低端浏览器,es6是一种新的语法,流行的库基本都是基于es6开发的.所以小伙伴要掌握哦!而 ...