<div class="info-table-item">
<el-table v-loading="loading" ref="infoTable" :data="growList" height="100%">
// 產(chǎn)生滾動(dòng)條fixed時(shí)間固定在最左側(cè)
<el-table-column label="時(shí)間" align="center" prop="time" fixed width="130" />
<template v-for="(item, index) in tableHead">
// v-for也可以寫(xiě)在el-table-column標(biāo)簽內(nèi)饶套，:key一定不要用index,否則會(huì)因?yàn)榍昂髢纱武秩镜膋ey值一樣產(chǎn)生緩存報(bào)錯(cuò)，
取不到值的現(xiàn)象,從而造成表格渲染錯(cuò)位其馏。
<!-- 一級(jí)表頭 -->
<el-table-column :key="item" :label="item" align="center">
<!-- 二級(jí)表頭 -->
<el-table-column :label="tableQuery.moldName" align="center">
<template slot-scope="scope">
<span>{{ scope.row[item].number}}</span>
</template>
</el-table-column>
<el-table-column label="增長(zhǎng)率" align="center">
<template slot-scope="scope">
<!-- 根據(jù)正負(fù)切換顏色 -->
<span :class="scope.row[item].rate >= 0 ? red : green">{{ scope.row[item].rate }}%</span>
</template>
</el-table-column>
</el-table-column>
</template>
</el-table>
</div>
//js methods
getListData() {
this.loading = true;
this.creatTime();
quickContrast(this.searchQuery).then(response => {
let dataList = [];
this.status = false;
const res = response.data;
this.tableHead = Object.assign([], this.nameList);
this.tableQuery = Object.assign({}, this.searchQuery);
for (let i = 0; i < this.chartTime.length; i++) {
dataList.push({ time: this.chartTime[i] });
for (let j = 0; j < this.tableHead.length; j++) {
let name = this.tableHead[j];
dataList[i][name] = { number: 0, rate: '0.00' };
}
}
for (let i = 0; i < res.length; i++) {
for (let j = 0; j < dataList.length; j++) {
if (res[i].ty === dataList[j].time) {
let qty = this.convertUnit(Number(res[i].qty.toFixed(2)));
let compare = res[i].compare;
dataList[j][res[i].objName].number = qty;
dataList[j][res[i].objName].rate = compare;
}
}
}
this.growList = dataList;
// 時(shí)間固定最左側(cè)重新渲染列表，不然會(huì)錯(cuò)位
this.$nextTick(() => {
this.$refs.infoTable.doLayout();
});
this.loading = false;
});
},
需求：
1爆安、不同類(lèi)型的表頭來(lái)回切換需要?jiǎng)討B(tài)v-for渲染表頭叛复，如（[北京、上海扔仓、廣州褐奥、深圳]，[大眾翘簇、豐田撬码、日產(chǎn)、本田]版保，[小型車(chē)呜笑、緊湊型夫否、中型車(chē)、中大型]）叫胁，表頭內(nèi)容全部由后端傳遞凰慈，每組內(nèi)容不固定；
2驼鹅、一級(jí)表頭下還需要嵌套兩個(gè)二級(jí)表頭（如銷(xiāo)量微谓、增長(zhǎng)率）；
3输钩、增長(zhǎng)率正為紅色豺型，負(fù)為綠色；
4买乃、列表產(chǎn)生橫向滾動(dòng)條時(shí)姻氨，時(shí)間一列固定在最左側(cè)。
