• 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。

  • 相关阅读:
    BIOS中的UEFI和Legacy启动模式
    php和java中的加密和解密
    Linux 的进程状态
    C++继承:公有,私有,保护
    编译器在构造函数里都做了些什么?
    操作符重载
    C++对象模型学习笔记
    sizeof操作符-结构体与类大小
    C++之智能指针
    C/C++笔试题整理
  • 原文地址:https://www.cnblogs.com/wy120/p/9796417.html
Copyright © 2020-2023  润新知