[本文出自天外歸雲的博客園]element-ui
需求圖示以下，多級縱向動態表頭表格：api
個人思路是用element-ui的layout實現，作出一個仿造表格，可以支持動態的、多級的、縱向的表頭：佈局
<template>
<div>
<!--按設備系通通計-->
<div style="text-align:left">
<h1>{{tableName}}</h1>
</div>
<!--縱向表格設計-->
<el-row>
<!--縱向表頭設計-->
<el-col :span="6">
<el-row>
<div :style="projectDivStyle">
<p>項目名</p>
</div>
</el-row>
<el-row v-if="ifAndroid">
<el-col :span="12">
<div :style="wordOfMouthAndroidDivStyle">
<p>Android口碑指數</p>
</div>
</el-col>
<el-col :span="12">
<el-row v-for="(chl, i) in tableData.ratingChls" :key="i">
<div :style="ratingSubDivStyle">
<p>{{chl}}</p>
</div>
</el-row>
</el-col>
</el-row>
<el-row v-else>
<div :style="wordOfMouthIOSDivStyle">
<p>AppStore口碑指數</p>
</div>
</el-row>
<el-row>
<el-col :span="12">
<div :style="ratingDivStyle">
<p>評分</p>
</div>
</el-col>
<el-col :span="12">
<el-row v-for="(chl, i) in tableData.ratingChls" :key="i">
<div :style="ratingSubDivStyle">
<p>{{chl}}</p>
</div>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div :style="rankDivStyle">
<p>排名</p>
</div>
</el-col>
<el-col :span="12">
<el-row v-for="(chl,i) in tableData.rankChls" :key="i">
<div :style="rankSubDivStyle">
<p>{{chl}}</p>
</div>
</el-row>
</el-col>
</el-row>
<el-row>
<div :style="topModuleDivStyle">
<p>TOP3好評關鍵詞</p>
</div>
</el-row>
<el-row>
<div :style="topModuleDivStyle">
<p>TOP3差評關鍵詞</p>
</div>
</el-row>
</el-col>
<!--縱列數據遍歷-->
<el-col :span="colSpan" v-for="(col,i) in tableData.cols" :key="i">
<!--項目名數據-->
<el-row>
<div :style="projectDivStyle">
<p>{{col.name}}</p>
</div>
</el-row>
<!--口碑數據 區分Android和iOS視圖顯示邏輯-->
<el-row v-if="ifAndroid">
<el-col :span="24">
<el-row v-for="(each, i) in col.wordOfMouth" :key="i">
<div :style="ratingSubDivStyle">
<p> {{each}} </p>
</div>
</el-row>
</el-col>
</el-row>
<el-row v-else>
<div :style="wordOfMouthIOSDivStyle">
<p>{{col.wordOfMouth[0]}}</p>
</div>
</el-row>
<!--評分數據-->
<el-row>
<el-col :span="24">
<el-row v-for="(each, i) in col.ratingInfo" :key="i">
<div :style="ratingSubDivStyle">
<p> {{each.info}} </p>
<el-rate :value='Number(each.rating)' disabled show-score text-color="#ff9900" score-template="{value}">
</el-rate>
</div>
</el-row>
</el-col>
</el-row>
<!--排名數據-->
<el-row>
<el-col :span="24">
<el-row v-for="(each,i) in col.rankInfo" :key="i">
<div :style="rankSubDivStyle">
<p>{{each.rank}} {{each.info}}</p>
</div>
</el-row>
</el-col>
</el-row>
<el-row>
<div :style="topModuleDivStyle">
<p v-for="(_module,i) in modules(col.topGoodModule)" :key="i"> {{_module}} </p>
</div>
</el-row>
<el-row>
<div :style="topModuleDivStyle">
<p v-for="(_module,i) in modules(col.topBadModule)" :key="i"> {{_module}} </p>
</div>
</el-row>
</el-col>
</el-row>
</div>
</template>
<style scoped>
/* 經過佈局el-row來完成表格邊界樣式替代式設計 */ .el-row { margin-bottom: 0px; /*去除el-row之間的間距*/ border: 1px solid #e6e6e6; margin: -1px -1px -1px -1px; /*解決相鄰邊框重疊問題就靠這行代碼*/
&:last-child { margin-bottom: 0px; } } .bg-purple { } .bg-purple-light { background: #121927; } .grid-content { border: 0px solid rgb(0, 0, 0); min-height: 50px; } .grid-content-sub { border: 0px solid rgb(0, 0, 0); padding: 20px; } .grid-content-large { border: 0px solid rgb(0, 0, 0); padding: 70px; height: 60px; } .grid-content-large-sub { border: 0px solid rgb(0, 0, 0); padding: 20px; height: 57.5px; } </style>
<script> import { getFeedbackCompetitorData } from '@/api/feedbacks' import { EventBus } from '@/bus.js' export default { data () { return { myProjectId: this.$route.query.feedbackProject, largeDivHeight: 120, smallDivHeight: 80, miniDivHeight: 50, ratingSubDivHeight: 80, rankSubDivHeight: 80, tableName: '', tableData: [], shadowCss: 'border-radius: 15px;box-shadow: 5px 5px 2px #888888', borderStyle: '' } }, methods: { getFbCompetitorData () { getFeedbackCompetitorData(this.myProjectId).then(fbCpInfo => { this.tableName = fbCpInfo.competitorTable.tableName this.tableData = fbCpInfo.competitorTable.tableData }) }, modules (someArray) { var newArray = [] for (var i = 0; i < someArray.length; i++) { var count = someArray[i]['cou'] var word = someArray[i]['word'] newArray.push(word + ':' + count) } return newArray } }, computed: { ifAndroid: function () { if (this.tableData.wordOfMouthChls[0] === 'AppStore') { return false } else { return true } }, colSpan: function () { var count = this.tableData.cols.length if (count > 5) { return 18 / count } else if (count < 4) { return 6 } }, commonDivStyle: function () { var height = this.smallDivHeight return `padding: 20px;height: ${height}px` }, projectDivStyle: function () { var height = this.miniDivHeight return `background: #E8F8F5;padding: 20px;height: ${height}px` }, wordOfMouthAndroidDivStyle: function () { var height = this.miniDivHeight return `margin-top:50%;padding: 20px;height: ${height}px` }, wordOfMouthIOSDivStyle: function () { var height = this.miniDivHeight return `padding: 20px;height: ${height}px` }, topModuleDivStyle: function () { var height = this.largeDivHeight return `padding: 20px;height: ${height}px` }, ratingDivStyle: function () { var height = this.ratingSubDivHeight // 區分Android和iOS樣式
if (this.ifAndroid) { var margin = 'margin-top:50%' } return `${margin};padding: 20px;height: ${height}px` }, ratingSubDivStyle: function () { var height = this.ratingSubDivHeight return `padding: 20px;height: ${height}px` }, rankDivStyle: function () { var height = this.rankSubDivHeight return `margin-top:30%;padding: 20px;height: ${height}px` }, rankSubDivStyle: function () { var height = this.rankSubDivHeight return `padding: 20px;height: ${height}px` } }, created () { let _this = this EventBus.$on('projectId', projectId => { _this.myProjectId = projectId }) }, mounted () { this.getFbCompetitorData() }, watch: { myProjectId: { immediate: false, handler: function (val) { this.getFbCompetitorData() } } } } </script>
實現圖以下：ui