<template>
  <view class="table">
    <!-- 表头 -->
    <view class="tr header">
      <view class="th" :style="{'width': col.width}" v-for="col in columns" :key="col.key">{{ col.title }}</view>
    </view>
    
    <!-- 数据行 -->
    <view class="tr" v-for="(item, index) in tableData" :key="index">
      <view class="td color-6" style="display: inline-flex;align-items: center;
    justify-content: flex-start;" v-for="col in columns"  :style="{'width': col.width}"  :key="col.key">
       <span class="truncate"> {{ item[col.key] }} </span>
		<img style="width: 20rpx;height: 20rpx;margin-left: 10rpx;" v-if="col.key === 'earnings'" :src="icon" alt="" />
      </view>
    </view>
  </view>
</template>

<script>
	import ZS from '@/static/image/income/zuanshi.png';
export default {
	props: {
		// 外部传入的标签数据
		tableData: {},
		tableLabel:[]
	},
  data() {
    return {
	  icon:ZS,
      columns: []
    }
  },
  created() {
	if(this.tableLabel && this.tableLabel.length) {
		this.columns = [...this.tableLabel]
	} else {
		this.columns = [
        { title: '昵称', key: 'nickname', width: '50%' },
        { title: '时间', key: 'createtime', width: '50%' },
      ]
	}
   }
}
</script>

<style scoped>
.table {
  width: 100%;
  font-size: 14px;
}

.tr {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.header {
  /* background-color: #f5f7fa; */
  font-weight: bold;
  color: #6A2E00;
}

.th, .td {
  padding: 12px 10px;
  box-sizing: border-box;
}

/* 动态设置列宽 */
/* .th:nth-child(1), .td:nth-child(1) { width: 50%; }
.th:nth-child(2), .td:nth-child(2) { width: 50%; }
.th:nth-child(3), .td:nth-child(3) { width: 20%; }
.th:nth-child(4), .td:nth-child(4) { 
  width: 20%;
  text-align: center;
} */
</style>