From 6738d48087c2c89d136eaf2a494c61392e087b54 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Tue, 21 Nov 2023 14:50:02 +0800
Subject: [PATCH] fix:表格滚动修改
---
src/views/toCarryOutLegislativeReforms/summaryPage/index.vue | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 100 insertions(+), 15 deletions(-)
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
index c1f050c..d53fbe1 100644
--- a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
@@ -1,14 +1,14 @@
<template>
<div class="main">
<div class="timeSelect">
- <el-radio-group v-model="searchForm.number" style="margin-left:20px" @input="changeNumber">
+ <el-radio-group v-model="searchForm.number" style="margin-left:20px" @input="changeNumber('timeMouted')">
<el-radio-button label="1">���1������</el-radio-button>
<el-radio-button label="2">���2������</el-radio-button>
<el-radio-button label="3">���3������</el-radio-button>
<el-radio-button label="6">���6������</el-radio-button>
<el-radio-button label="12">���12������</el-radio-button>
</el-radio-group>
- <el-date-picker v-model="timeInterval" el-time-picker type="daterange" value-format="yyyy-MM-dd" range-separator="���" start-placeholder="������������" end-placeholder="������������" @change="changeNumber" />
+ <el-date-picker v-model="timeInterval" el-time-picker type="daterange" value-format="yyyy-MM-dd" range-separator="���" start-placeholder="������������" end-placeholder="������������" @change="changeNumber('timeValue')" />
</div>
<div class="agentSummary">
<div class="circle">
@@ -40,20 +40,48 @@
������
</el-button>
</div>
- <div class="tab">
- <el-table :data="tableData" border max-height="400" style="width: 100%" :header-cell-style="{
+ <div class="min">
+ <div class="tab" style="display: inline-block; width: 100%">
+ <el-table :data="tableData" class="top" border style="width: 100%" :header-cell-style="{
background: '#99D4FF', color: '#101111', fontSize: '16px'
}">
- <el-table-column align="center" prop="unitName" label="������������" />
- <el-table-column align="center" prop="total" label="���������" />
- <el-table-column align="center" prop="number" label="���������" />
- <el-table-column align="center" prop="unNumber" label="���������" />
- <el-table-column align="center" prop="rate" label="���������" />
- <el-table-column align="center" prop="deduction" label="������" />
- <el-table-column align="center" prop="marks" label="������" />
- <el-table-column align="center" prop="totalPoints" label="���������" />
- </el-table>
+ <el-table-column align="center" type="index" width="60" label="������" />
+ <el-table-column align="center" prop="unitName" label="������������" />
+ <el-table-column align="center" prop="total" label="���������" />
+ <el-table-column align="center" prop="number" label="���������" />
+ <el-table-column align="center" prop="unNumber" label="���������" />
+ <el-table-column align="center" prop="rate" label="���������" />
+ <el-table-column align="center" prop="deduction" label="������" />
+ <el-table-column align="center" prop="marks" label="������" />
+ <el-table-column align="center" prop="totalPoints" label="���������" />
+ </el-table>
+ <vueSeamless :data="tableData" v-if="tableData.length>5" ref="scroll3" :pause="true" class="seamless-warp" style="width: 100%;" :class-option="classOption">
+ <el-table :data="tableData" v-if="tableData.length>0" class="bottom" border style="width: 100%;margin-bottom:50px">
+ <el-table-column align="center" type="index" width="60" />
+ <el-table-column align="center" prop="unitName" label="������������" />
+ <el-table-column align="center" prop="total" label="���������" />
+ <el-table-column align="center" prop="number" label="���������" />
+ <el-table-column align="center" prop="unNumber" label="���������" />
+ <el-table-column align="center" prop="rate" label="���������" />
+ <el-table-column align="center" prop="deduction" label="������" />
+ <el-table-column align="center" prop="marks" label="������" />
+ <el-table-column align="center" prop="totalPoints" label="���������" />
+ </el-table>
+ </vueSeamless>
+ <el-table :data="tableData" v-else class="bottom" border style="width: 100%;margin-bottom:50px">
+ <el-table-column align="center" type="index" width="60" />
+ <el-table-column align="center" prop="unitName" label="������������" />
+ <el-table-column align="center" prop="total" label="���������" />
+ <el-table-column align="center" prop="number" label="���������" />
+ <el-table-column align="center" prop="unNumber" label="���������" />
+ <el-table-column align="center" prop="rate" label="���������" />
+ <el-table-column align="center" prop="deduction" label="������" />
+ <el-table-column align="center" prop="marks" label="������" />
+ <el-table-column align="center" prop="totalPoints" label="���������" />
+ </el-table>
+ </div>
</div>
+
</div>
</el-tab-pane>
<el-tab-pane label="������" name="second">
@@ -86,10 +114,12 @@
</template>
<script>
+import vueSeamless from 'vue-seamless-scroll'
import pollutionClassificationEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts'
import reportTypeEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts'
export default {
components: {
+ vueSeamless,
pollutionClassificationEcharts,
reportTypeEcharts
},
@@ -115,7 +145,15 @@
overdue: ''
},
chartData: [],
- cylindricalityData: []
+ cylindricalityData: [],
+ tableDataTotal: 0
+ }
+ },
+ computed: {
+ classOption() {
+ let data = this.loadMore()
+ console.log('return ', data)
+ return data
}
},
created() {
@@ -124,6 +162,32 @@
this.handleSearch()
},
methods: {
+ loadMore() {
+ let data = {}
+ if (this.tableDataTotal > 5) {
+ data = {
+ step: 0.8, // ������������������������������
+ limitMoveNum: this.tableData.length, // ������������������������������ this.tableData
+ hoverStop: true, // ������������������������stop
+ autoPlay: true,
+ direction: 1, // 0������ 1������ 2������ 3������
+ openWatch: true, // ������������������������������dom
+ singleHeight: 30, // ���������������������������(���������0���������������������������) direction => 0/1
+ singleWidth: 0, // ���������������������������(���������0���������������������������) direction => 2/3
+ waitTime: 1000 // ���������������������������(���������1000ms)
+ }
+ } else {
+ this.$refs.scroll3 && this.$refs.scroll3._cancle()
+
+ data = {
+ step: 0, // ������������������������������
+ limitMoveNum: this.tableData.length,
+ openWatch: true
+ }
+ }
+ console.log('data', data)
+ return data
+ },
ecxport() {
this.$request({
url: '/allocation/unitExel',
@@ -164,6 +228,11 @@
return data ? data.unitName : ''
},
changeNumber(val) {
+ if (val === 'timeValue') {
+ this.searchForm.number = null
+ } else {
+ this.timeInterval = []
+ }
this.handleSearch()
},
handleClick(tab, event) {
@@ -202,7 +271,8 @@
}).then(res => {
if (res.code === 0) {
this.responeForm = res.data
- this.tableData = res.data.unitView
+ this.tableData = res.data.unitView || []
+ this.tableDataTotal = this.tableData.length
this.chartData = res.data.polluteType
this.cylindricalityData = res.data.escalationType
} else {
@@ -336,5 +406,20 @@
}
}
}
+ .seamless-warp {
+ height: 380px;
+ overflow: hidden;
+ }
+ .min {
+ display: flex;
+ width: 100%;
+ }
+ .top /deep/.el-table__body-wrapper {
+ display: none;
+ }
+ .bottom /deep/.el-table__header-wrapper {
+ display: none;
+ width: 100%;
+ }
}
</style>
--
Gitblit v1.8.0