初始化

component/table.vue

@@ -0,0 +1,76 @@
+<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>