gy-app-shop/components/historyCmp/table.vue

109 lines
2.2 KiB
Vue

<style lang='scss' scoped>
.historyCurve-table{
width: 100%;
height: 100%;
&-list{
height: 480rpx;
overflow: auto;
}
}
</style>
<template>
<view class="historyCurve-table" >
<template v-if="has_data">
<u-table>
<u-tr>
<u-th v-for="(item,index) in tableList.head" :key="index">{{item}}</u-th>
<!-- <u-th>班级</u-th>
<u-th>年龄</u-th> -->
</u-tr>
<view class="historyCurve-table-list">
<u-tr v-for="(item,index) in tableList.body" :key="index">
<u-td v-for="(value,key) in item" :key="key">
{{value}}
</u-td>
<!-- <u-td>{{item.time}}</u-td>
<u-td>{{item.data0}}</u-td>
<u-td>{{item.data1}}</u-td> -->
</u-tr>
</view>
</u-table>
</template>
<template v-else>
<u-empty text="数据为空" mode="data"></u-empty>
</template>
</view>
</template>
<script>
export default {
props: {
prodDataList: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
// prodDataList:{
// series: [
// {name: "成交量A", data: [35, 8, 25, 37, 4, 20]},
// {name: "成交量B", data: [70, 40, 65, 100, 44, 68]},
// ],
// categories:[2021,2020,2022,1999,1996,1995]
// },
tableList:{
head:[],
body:[]
// head:["年份","成交量A","成交量B"],
// body:[{
// year:"2021",
// data1:35,
// data2:70
// }]
},
has_data: false
}
},
created() {
this.handlerData();
},
watch: {
prodDataList(newVal) {
this.handlerData();
}
},
methods: {
handlerData() {
if(Object.keys(this.prodDataList).length == 0){
this.has_data = false;
} else {
this.tableList={
head:[],
body:[]
}
this.tableList.head.push("时间");
this.prodDataList.series.forEach((obj,i)=>{
this.tableList.head.push(obj.name);
});
this.prodDataList.categories.forEach((item,index)=>{
let dataObj = {
time:item
};
this.prodDataList.series.forEach((obj,i)=>{
dataObj['data' + i] = obj.data[index];
});
this.tableList.body.push(dataObj);
});
this.has_data = true;
}
setTimeout(() => {
this.$emit('onRenderFinsh', 'ok');
}, 1000)
}
}
}
</script>