76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<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> |