开门见山,话不多说,要在表格中添加图片,可以使用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. 阿里云ECS服务器centos6.x安装docker问题盘点

    1.首先在centos6.x和centos7.x中yum安装docker的区分. centos6.x: yum install docker-io centos7.x: yum install doc ...

  2. HTML5基本标签<搬运>

    HTML语言基本标签: 创建一个HTML文档<html></html> 设置文档标题以及其他不在WEB网页上显示的信息<head></head> 设置文 ...

  3. bfs(双向bfs加三维数组)

    http://acm.hdu.edu.cn/showproblem.php?pid=2612 Find a way Time Limit: 3000/1000 MS (Java/Others)     ...

  4. NGUI的slider的滑动条制作(SliderScript)

    一,添加一个sprite,给这个sprite添加一个背景如下图: 二,在当前的sprite添加一个子sprite同时给子层添加一个颜色较深的图片,这个子层覆盖当前sprite,我们需要调节子层的dep ...

  5. ios-实现ARC与MRC混编

    选择target -> build phases -> compile sources -> 用ARC的文件将compiler flags设置为:-fobjc-arc,用MRC的文件 ...

  6. MySQL04-- 版本区别及管理

    目录 MySQL版本区别及管理 一.MySQL5.6与MySQL5.7安装的区别 二.MySQL用户权限管理 三.MySQL连接管理 四.MySQL启动关闭流程 五.MySQL实例初始化配置 六.My ...

  7. json字符串处理—Json&C#

    C# 转自:https://blog.csdn.net/sajiazaici/article/details/77647625# 本文是全网第二简单的方法,因为我女票也发了一篇博客说是全网最简单的方法 ...

  8. cookie和session的联系与区别

    Cookie 当你在浏览网站时,WEB服务器会先送一小小的资料放在你的计算机上,Cookie会帮你在网站上所打的文字或是一些选择都记录下来.当你下次再光临同一个网站时,WEB服务器会先看看有没有它上次 ...

  9. BigDecimal 算数

    BigDecimal big=new BigDecimal("22.233"); BigDecimal big1=new BigDecimal("12.233" ...

  10. [BZOJ3653]谈笑风生 主席树

    题面 这道题应该比较裸吧. \(a\),\(b\)都是\(c\)的祖先. 那么第一种情况是\(b\)是\(a\)的祖先,那么方案数就是\(\min\{dep[a]-1,k\}\cdot (num[a] ...