<!--
 * @Author: your name
 * @Date: 2021-03-11 08:49:02
 * @LastEditTime: 2021-04-07 09:02:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \efly-ui\src\components\efly\table\table.vue
-->
<template>
	<div>
		<table class='efly-table' ref="tes">
			<!-- <colgroup>
				<col v-for="(item,index) in slot" :width="item.width" v-show="item.show">
				<col name="gutter" width="0">
			</colgroup> -->
			<thead>
			<tr>
				<th v-for="(item,index) in slot" v-show="item.show" :width="item.width">
					<slot></slot>
				</th>
			</tr>
			</thead>
			<tbody v-if="status === 'havedata'">
			<tr v-for="(item, index) in data">
				<td v-for="(item, index) in slot" v-show="item.show">
					<slot></slot>
				</td>
			</tr>
			</tbody>
			<tbody class="efly-table-loading" v-if="status === 'loading'">
			<tr>
				<td colspan="50" align="center">
					<img :src="loadingImg ? loadingImg : '../../../assets/image/loading.gif'" alt="">
				</td>
			</tr>
			</tbody>
			<tbody class="efly-table-nodata" v-if="status === 'nodata' || status === 'error'">
			<tr>
				<td colspan="50" align="center">
					<i class="icon" :class="nodataIcon"></i>
					<div v-if="$slots.nodata">
						<slot name="nodata"></slot>
					</div>
					<p v-if="!$slots.nodata">暂无数据</p>
				</td>
			</tr>
			</tbody>
		</table>
		<!-- 兼容表格滚动，固定表头的，后续再搞 -->
		<!-- <div class="efly-table-body" style="overflow: auto;" :style="{'max-height': maxHeight}">
			<table class="efly-table">
				<colgroup>
					<col v-for="(item,index) in slot" :width="item.width" v-show="item.show">
					<col name="gutter" width="0">
				</colgroup>
				<tbody v-if="status === 'havedata'">
				<tr v-for="(item, index) in data">
					<td v-for="(item, index) in slot" v-show="item.show">
						<slot></slot>
					</td>
				</tr>
				</tbody>
				<tbody class="efly-table-loading" v-if="status === 'loading'">
				<tr>
					<td colspan="50" align="center">
						<img :src="loadingImg ? loadingImg : '../../../assets/image/loading.gif'" alt="">
					</td>
				</tr>
				</tbody>
				<tbody class="efly-table-nodata" v-if="status === 'nodata' || status === 'error'">
				<tr>
					<td colspan="50" align="center">
						<i class="icon" :class="nodataIcon"></i>
						<div v-if="$slots.nodata">
							<slot name="nodata"></slot>
						</div>
						<p v-if="!$slots.nodata">暂无数据</p>
					</td>
				</tr>
				</tbody>
			</table>

		</div> -->
	</div>

</template>

<script>
    import EflyTable from './table';

    export default EflyTable;
</script>

<style lang="scss" scoped>
	// colgroup {
	//     display: table-column-group;

	// 	col {
	// 		display: table-column;
	// 	}
	// }
</style>
