vue-easytable 单元格显示图片

一、代码块

通过 formatter函数对当前数据进行加工处理，这个方法接收rowData,rowIndex,pagingIndex,field作为回调数据；

	<template>
		<div>
			<v-table
			  is-horizontal-resize
			  style="width:100%;font-size: 14px;"
				:columns="contractColumns"
				:table-data="contractTableData"
				odd-bg-color="#F8FDFE"
				row-hover-color="#eee"
				row-click-color="#edf7ff"
				:paging-index="(pageIndex-1)*pageSize"
				:row-height="height"
				:row-click="fileRowClick"
			  ></v-table>
		</div>
	</template>
	<script>
		export default{
			data(){
				return{
					contractColumns: [{
						field:'s_FilePath',
						title:'文件',
						width:130,
						titleAlign:'center',
						columnAlign:'left',
						isResize: true,
						formatter: function (rowData,rowIndex,pagingIndex,field) {
							let index = rowData.s_FilePath.indexOf('.')
							let suffix= rowData.s_FilePath.substring(index+1,rowData.s_FilePath.length)
							if(suffix== 'pdf'){
								return '<img src="../../../../../static/pdf.png">'
							}else if(suffix == 'docx' || suffix == 'doc'){
								return '<img src="../../../../../static/word.png">'
							}else{}
						},					
					}			
				}
			}
		}
	</script>	

二、效果图