开门见山,话不多说,要在表格中添加图片,可以使用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. Java相关面试题总结+答案(四)

    [反射] 57. 什么是反射? 反射是在运行状态中,对于任意一个类,都能够知道该类的所有属性和方法,对于任意一个对象,都能够获得该对象的任一属性和方法:这种动态获取信息以及动态调用对象的方法的功能称之 ...

  2. 用vultr搭建ss服务器的脚本

    原文在此

  3. Ngnix VS Apache

    Ngnix和Apache各有优缺点, Ngnix在并发性能上比Apache好太多了 原因是,Ngnix是采用的epoll网络I/O模型, 而Apache采用的是select网络I/O模型 具体参见:  ...

  4. 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!

    这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...

  5. Leetcode Lect3 时间复杂度/空间复杂度

    时间复杂度 复杂度 可能对应的算法 备注 O(1) 位运算 常数级复杂度,一般面试中不会有 O(logn) 二分法,倍增法,快速幂算法,辗转相除法   O(n) 枚举法,双指针算法,单调栈算法,KMP ...

  6. jquery实现全选,反选,取消的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 攻防世界--Shuffle

    测试文件:https://adworld.xctf.org.cn/media/task/attachments/a03353e605bc436798a7cabfb11be073 1.准备 获得信息 3 ...

  8. C中char类型的用法

    代码 /* char类型的用法 */ #include <stdio.h> main(int argc, char *argv[]) { /* 声明字符变量c1 */ char c1 = ...

  9. 浏览器报406 错误:The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers

    The resource identified by this request is only capable of generating responses with characteristics ...

  10. iconfont图标symbol引用方式,有的图标不能通过设置color样式来修改颜色的解决办法

    现象:iconfont安装后的图标,是通过symbol引用方式,有的图标不能通过color修改颜色的解决办法,有的又可以. <svg class="icon" aria-hi ...