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。