<template>
	<div>
		<el-form :inline="true" class="grid-table">
			<el-row>
				<el-col v-for="item in config" :span="item.span" :key="item.label" class="ml-1" >
					<el-form-item :label="item.label" :label-width="(item.labelWidth||120)+'px'" >
					   <span class="pl10 nowrap" v-if="item.tag =='img'">
						   <show-img :src="info[item.key]" title="查看图片"/>
						</span>
					  <span class="pl10 nowrap" v-else-if="item.filters && !item.key">{{ item.filters(info) }}</span>
					  <span class="pl10 nowrap" v-else-if="item.filters">{{ item.filters(info[item.key]) }}</span>
					  <span class="pl10 nowrap" v-else>{{info[item.key]||'---' }}</span>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	  </div>
</template>
<script>
import showImg from "@/components/customPic/showImg.vue";
	export default {
	  name: "tableGrid",
	  components:{showImg},
	  props:{
		  info:{
			type:Object,
			default:function(){
				return {}
			}
		  },
		  config:{
			type: Array,
			default:function(){
				return []
			}
		  }
	  },
	  data() {
	    return {
	      // 布局数据
	      layoutHeight: 40,
	      layoutConfig: {
	        height: 40, // 默认高度
	        dialogVisible: false // 是否可拖拽或改变大小
	      },
	    };
	  },
	  methods: {
	  },
	  created() {
	  }
	};
</script>

<style>
	.grid-table{
		min-width: 1088px;
	}
	.ml-1 .el-form-item__label{
	    background-color: #f0f2f5;
		width: 110px;
		float: left;
		text-align: left;
		padding-left: 16px;
	}
	.ml-1{
		border: 0.1px solid #e8e8e8;
		margin-top:-1px;
		margin-left: -1px;
	}
	.grid-img{
		height: auto;
	}
	
</style>