zoukankan      html  css  js  c++  java
  • iview+vue 表格中添加图片

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

    <table class="table-style" border="1" 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',
         110,
        render: (h) => {
          return h('img', {
            attrs: {
              src: '../../../../assets/images/mapicon.png',
            },
            style: {
              marginRight: '5px'
            },
            on: {
              click: () => {
                this.menu2('/');
              }
            }
          });
        }
      }

    需要注意的是:

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

  • 相关阅读:
    smarty基础
    phpcms 内容模块PC标签调用
    phpcms v9中的$CATEGORYS栏目数组
    PHP如何实现验证码
    PHP生成一个不重复随机数组的封装方法
    简单实现php文件管理
    PHP-----作业:查询数据,在页面上显示
    PHP-----设计模式六大原则
    PHP-----静态
    PHP-----面向对象的设计模式:工厂模式例题
  • 原文地址:https://www.cnblogs.com/wy120/p/9796417.html
Copyright © 2011-2022 走看看