From 08b5ddfa9a0a2ed52bd7d7b98ca16ef4dcc610a6 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期二, 13 九月 2022 14:19:43 +0800
Subject: [PATCH] 页面修改
---
src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue | 167 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 108 insertions(+), 59 deletions(-)
diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue
index 2de4d00..0f21727 100644
--- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue
+++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue
@@ -253,15 +253,20 @@
</tbody>
</table>-->
<el-table
+ :max-height="tableHeight"
:data="tableData"
:span-method="objectSpanMethod"
+ :cell-style="cellClass"
border>
<el-table-column
align="center"
- type="index">
+ type="index"
+ label="搴忓彿"
+ width="110">
</el-table-column>
<template v-for="(item,index) in heardArry">
<el-table-column
+ :key="index"
align="center"
:prop="item"
:label="item">
@@ -298,50 +303,59 @@
</template>
<script>
+ import nowSize from "../../../../libs/nowSize";
import {getGraduateTable} from '@/api/jiuyeAndChuangye'
export default {
name: "biyeshengStatistics",
data() {
return {
- tableData: [{
- xiangmu: '鏈競楂樻牎',
- year: '2333',
- mergeRowIndex: 1,
- },{
- xiangmu: '鍏朵腑锛氭湰绉戞瘯涓氱敓',
- year: '2333',
- mergeRowIndex: 1,
- },{
- xiangmu: '涓撶姣曚笟鐢�',
- year: '2333',
- mergeRowIndex: 1,
- },{
- xiangmu: '鍏ㄧ渷楂樻牎',
- year: '2333',
- mergeRowIndex: 2,
- },{
- xiangmu: '鍏朵腑锛氭湰绉戞瘯涓氱敓',
- year: '2333',
- mergeRowIndex: 2,
- },{
- xiangmu: '涓撶姣曚笟鐢�',
- year: '2333',
- mergeRowIndex: 2,
- },{
- xiangmu: '鍏ㄧ渷楂樻牎鏈競鐢熸簮',
- year: '2333',
- mergeRowIndex: 3
- }],
+ tableData: [],
heardArry: [],
- rowIndexArr: []//瀛樺偍鍚堝苟鍗曞厓鏍肩殑寮�濮嬩綅缃�
+ rowIndexArr: [],//瀛樺偍鍚堝苟鍗曞厓鏍肩殑寮�濮嬩綅缃�
+ tableHeight: window.innerHeight - nowSize(230)
}
},
mounted() {
this.getGraduateTable()
},
methods: {
- objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-
+ objectSpanMethod({rowIndex, columnIndex}) { //鍚堝苟鍗曞厓鏍�
+ if(columnIndex == 0) {
+ if(this.rowIndexArr.includes(rowIndex)) {
+ console.log(rowIndex,'------index')
+ return {
+ rowspan: this.rowIndexArr[this.rowIndexArr.indexOf(rowIndex) + 1] - rowIndex,
+ colspan: 1,
+ }
+ }else {
+ return {
+ rowspan: 0,
+ colspan: 0
+ }
+ }
+ }
+ },
+ cellClass({ row, column, rowIndex, columnIndex }) { //淇敼鏌愪釜鍗曞厓鏍兼牱寮�
+ if(columnIndex == 1) {
+ if(this.rowIndexArr.includes(rowIndex)) {
+ return {
+ textAlign: 'left'
+ }
+ }
+ }
+ if(columnIndex == 0) {
+ return { background:'#51D2FF' }
+ }
+ },
+ getData() {
+ let res = this.tableData
+ res.reduce((prev, cur, curIndex) => {
+ if(prev == 0 || prev != cur.mark) {
+ this.rowIndexArr.push(curIndex)
+ }
+ return cur.mark
+ },0)
+ this.rowIndexArr.push(res.length)
},
getGraduateTable() {
getGraduateTable().then(res => {
@@ -355,40 +369,55 @@
this.heardArry = []
}
result.forEach((item,index) => {
- item.typeList && item.typeList.forEach((e,i) => {
- console.log('e------------e',e.name)
- console.log(rows[0],'0000000000000000000000000')
+ head.push(item.year)
+ item.dataList.forEach((e,i) => {
if(!rows[i]) {
- console.log(rows[i],'rows[index]------rows[index]')
- console.log('e------------e----2',e.name)
- console.log('index------------index----index',index)
- rows[i] = {"椤圭洰" : e.name}
- console.log(rows[i],'rows[index]------------1')
+ rows[i] = { '椤圭洰' : e.name}
}
-
- e.dataList && e.dataList.forEach((data,k) => {
- if(index == 0 && i == 0) {
- head.push(data.year)
- console.log(head,'head-----=============head')
- }
- rows[i][data.year] = data.val
- console.log(rows[i][data.year],'rows---------333333333')
- })
+ rows[i][item.year] = e.val
+ rows[i]['mark'] = e.mark
})
+
})
this.tableData = rows
this.heardArry = head
- console.log('this.tableData----this.tableData-----',this.tableData)
+ this.getData()
}
})
- // let res = this.tableData
- // res.reduce((prev, cur, index) => {
- // console.log('prev',prev)
- // console.log('cur',cur)
- // console.log('index',index)
- // return cur.mergeRowIndex
- // },0)
+
+ },
+ getMaxLength (arr) {
+ return arr.reduce((acc, item) => {
+ if (item) {
+ const calcLen = this.getTextWidth(item)
+ if (acc < calcLen) {
+ acc = calcLen
+ }
+ }
+ return acc
+ }, 0)
+ },
+ /*鍔ㄦ�佽幏鍙栬〃鏍煎搴�*/
+ getTextWidth (str) {
+ let width = 0
+ const html = document.createElement('span')
+ html.innerText = str
+ html.className = 'getTextWidth'
+ document.querySelector('body').appendChild(html)
+ width = document.querySelector('.getTextWidth').offsetWidth
+ console.log('width',width)
+ document.querySelector('.getTextWidth').remove()
+ return width
+ },
+ getHeight() {
+ this.tableHeight = window.innerHeight - nowSize(230)
}
+ },
+ created() {
+ window.addEventListener('resize', this.getHeight)
+ },
+ destroyed() {
+ window.addEventListener('resize', this.getHeight)
}
}
</script>
@@ -429,6 +458,27 @@
font-weight: 300;
line-height: 1;
}
+ /*.el-table th {*/
+ /* padding: 0;*/
+ /* white-space: nowrap;*/
+ /* min-width: fit-content;*/
+ /*}*/
+
+ /*.el-table td {*/
+ /* padding: 1px;*/
+ /* white-space: nowrap;*/
+ /* width: fit-content;*/
+ /*}*/
+
+ /*!** 淇敼el-card榛樿paddingL:20px-鍐呰竟璺� **!*/
+ /*.el-card__body {*/
+ /* padding: 10px;*/
+ /*}*/
+
+ /*.el-table .cell {*/
+ /* white-space: nowrap;*/
+ /* width: fit-content;*/
+ /*}*/
}
</style>
@@ -437,7 +487,6 @@
.biyeshengStatistics-wrap{
width: 100%;
height: 100%;
- overflow-y: auto;
.biyeshengStatistics-table{
width: 100%;
border: 1Px solid $color-grey; /*no*/
--
Gitblit v1.9.1