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。