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',

　　　　width: 110,

　　　　render: (h) => {

　　　　　　return h('img', {

　　　　　　　　attrs: {

　　　　　　　　　　src: '../../../../assets/images/mapicon.png',

　　　　　　　　},

　　　　　　　　style: {

　　　　　　　　　　marginRight: '5px'

　　　　　　　　},

　　　　　　　　on: {

　　　　　　　　　　click: () => {

　　　　　　　　　　　　this.menu2('/');

　　　　　　　　　　}

　　　　　　　　}

　　　　　　});

　　　　}

　　}

 

需要注意的是：

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

 

转载于:https://www.cnblogs.com/wy120/p/9796417.html