档案管理list高度自适应/滚动条问题

src/assets/styles/index.scss

@@ -210,6 +210,11 @@ ul{
   border-radius: 3px;
 }
 
+//只需要加上这一行
+::-webkit-scrollbar-corner {
+  background-color:  #021941;
+}
+
 // 设置loading-mask
 .el-loading-mask{
   background-color: rgba(0,0,0,0.2);

src/views/archivesManage/archivesList/archivesAnjuan/index.vue

@@ -65,7 +65,7 @@
     </el-dialog>
 
     <!-- table表格渲染 -->
-    <!-- height="calc(100vh - 350px)" -->
+    <!-- height="calc(100vh - 434px)" -->
     <el-card class="box-card" shadow="never">
       <span class="right-top-line" />
       <span class="left-bottom-line" />
@@ -76,7 +76,7 @@
         :data="anjuanData"
         highlight-current-row
         style="width: 100%;"
-        height="calc(100vh - 434px)"
+        :height="anjuanTableHeight"
         @select-all="selectAll"
         @selection-change="crud.selectionChangeHandler"
         @row-click="clickRowHandler"
@@ -237,7 +237,6 @@ export default {
       anjuanQuery: {},
       queryOption: [],
       anjuanInputSelect: '',
-      anjuanTableHeight: null,
       stateOptions: [ // 搜索 - 状态选择
         { value: '0', label: '全部' },
         { value: '1', label: '未装' },
@@ -285,17 +284,6 @@ export default {
     this.query.queryType = this.stateOptions[0].value
   },
   mounted() {
-    // this.$nextTick(() => {
-    //   console.log(this.anjuanData.length)
-    //   if (this.anjuanData.length === 0 || this.anjuanData.length < 10) {
-    //     console.log('tres')
-    //     this.anjuanTableHeight = null
-    //   } else {
-    //     console.log('666')
-    //     const h = '100vh'
-    //     this.anjuanTableHeight = `calc(${h} - 434px)`
-    //   }
-    // })
   },
   methods: {
     // 文件/案卷重置query
@@ -322,7 +310,7 @@ export default {
     handleSizeChange(size) {
       this.page.size = size
       this.page.page = 1
-      this.getListCommon('anjuanData', 1)
+      this.getListCommon('anjuanData', 'anjuanTableHeight', 1)
     },
     // list
     getTableList() {
@@ -345,12 +333,12 @@ export default {
           this.query.responsibleby = this.anjuanQuery[this.anjuanInputSelect]
           break
       }
-      this.getListCommon('anjuanData', 1)
+      this.getListCommon('anjuanData', 'anjuanTableHeight', 1)
     },
     stateSelect(val) {
       this.page.page = 1
       this.query.queryType = val
-      this.getListCommon('anjuanData', 1)
+      this.getListCommon('anjuanData', 'anjuanTableHeight', 1)
     },
     // table - 全选
     selectAll(val) {
@@ -474,9 +462,8 @@ export default {
     padding-left: 106px !important;
   }
 }
-
 ::v-deep .el-table__fixed-right-patch{
-  background-color:#13439e;
+  background-color:#02255f;
   border-bottom: none;
 }
 </style>

src/views/archivesManage/archivesList/archivesJuannei/index.vue

@@ -60,7 +60,7 @@
         :data="junneiData"
         highlight-current-row
         style="width: 100%;"
-        height="calc(100vh - 434px)"
+        :height="juanneiTableHeight"
         @select-all="selectAll"
         @selection-change="crud.selectionChangeHandler"
         @row-click="clickRowHandler"
@@ -180,7 +180,6 @@ export default {
     return {
       junneiData: [],
       juanneiQuery: {},
-      juanneiTableHeight: null,
       queryOption: [
         { value: 'queryTitle', label: '题名' },
         { value: 'archiveNo', label: '档号' },
@@ -228,7 +227,7 @@ export default {
     handleSizeChange(size) {
       this.page.size = size
       this.page.page = 1
-      this.getListCommon('junneiData', 2)
+      this.getListCommon('junneiData', 'juanneiTableHeight', 2)
     },
     // list
     getTableList() {
@@ -246,7 +245,7 @@ export default {
           this.query.responsibleby = this.juanneiQuery[this.juanneiInputSelect]
           break
       }
-      this.getListCommon('junneiData', 2)
+      this.getListCommon('junneiData', 'juanneiTableHeight', 2)
     },
     // table - 全选
     selectAll(val) {
@@ -287,4 +286,8 @@ export default {
     padding-left: 85px !important;
   }
 }
+::v-deep .el-table__fixed-right-patch{
+  background-color:#02255f;
+  border-bottom: none;
+}
 </style>

src/views/archivesManage/archivesList/archivesProject/index.vue

@@ -57,7 +57,7 @@
         :data="projectData"
         highlight-current-row
         style="width: 100%;"
-        height="calc(100vh - 434px)"
+        :height="projectTableHeight"
         @select-all="selectAll"
         @selection-change="crud.selectionChangeHandler"
         @row-click="clickRowHandler"
@@ -144,7 +144,6 @@ export default {
         { value: 'itemNo', label: '项目代号' }
       ],
       projectInputSelect: '',
-      projectTableHeight: null,
       isProject: true // 用于判断案卷-新增/导出按钮
     }
   },
@@ -176,7 +175,7 @@ export default {
     handleSizeChange(size) {
       this.page.size = size
       this.page.page = 1
-      this.getListCommon('projectData', 0)
+      this.getListCommon('projectData', 'projectTableHeight', 0)
     },
     // table - list
     getTableList(page) {
@@ -190,7 +189,7 @@ export default {
           this.query.itemNo = this.projectQuery[this.projectInputSelect]
           break
       }
-      this.getListCommon('projectData', 0)
+      this.getListCommon('projectData', 'projectTableHeight', 0)
     },
     // table - 全选
     selectAll(val) {
@@ -240,5 +239,9 @@ export default {
     padding-left: 94px !important;
   }
 }
+::v-deep .el-table__fixed-right-patch{
+  background-color:#02255f;
+  border-bottom: none;
+}
 </style>
 

src/views/archivesManage/archivesList/index.vue

@@ -258,8 +258,10 @@ export default {
         this.$nextTick(() => {
           if (this.$refs.anjuan) {
             this.$refs.anjuan.anjuanData = []
+            this.$refs.anjuan.anjuanTableHeight = ''
             if (this.$refs.file) {
               this.$refs.file.junneiData = []
+              this.$refs.file.juanneiTableHeight = ''
             }
           }
         })
@@ -270,6 +272,7 @@ export default {
             this.$refs.anjuan.getTableList()
             if (this.$refs.file) {
               this.$refs.file.junneiData = []
+              this.$refs.file.juanneiTableHeight = ''
             }
           }
         })
@@ -280,6 +283,7 @@ export default {
             this.$refs.anjuan.getTableList()
             if (this.$refs.file) {
               this.$refs.file.junneiData = []
+              this.$refs.file.juanneiTableHeight = ''
             }
           }
         })
@@ -395,9 +399,11 @@ export default {
         this.$nextTick(() => {
           if (this.$refs.anjuan) {
             this.$refs.anjuan.anjuanData = []
+            this.$refs.anjuan.anjuanTableHeight = ''
           }
           if (this.$refs.file) {
             this.$refs.file.junneiData = []
+            this.$refs.file.juanneiTableHeight = ''
           }
           this.$refs.project.getTableDisplayFields(0)
           if (this.selectedCategory.children.length !== 0) {
@@ -419,9 +425,11 @@ export default {
         this.$nextTick(() => {
           if (this.$refs.anjuan) {
             this.$refs.anjuan.anjuanData = []
+            this.$refs.anjuan.anjuanTableHeight = ''
           }
           if (this.$refs.file) {
             this.$refs.file.junneiData = []
+            this.$refs.file.juanneiTableHeight = ''
           }
           this.$refs.anjuan.getTableDisplayFields(1)
           if (this.selectedCategory.children.length !== 0) {
@@ -440,6 +448,7 @@ export default {
         this.$nextTick(() => {
           if (this.$refs.file) {
             this.$refs.file.junneiData = []
+            this.$refs.file.juanneiTableHeight = ''
           }
           this.$refs.file.getTableDisplayFields(2)
           setTimeout(() => {
@@ -453,6 +462,7 @@ export default {
         this.$nextTick(() => {
           if (this.$refs.anjuan) {
             this.$refs.anjuan.anjuanData = []
+            this.$refs.anjuan.anjuanTableHeight = ''
           }
           this.$refs.anjuan.getTableDisplayFields(1)
           setTimeout(() => {

src/views/archivesManage/archivesList/mixins/archives.js

@@ -20,6 +20,9 @@ export const archivesCrud = {
       borrowTxt: [],
       tableDisplayFields: [], // table-list-title字段
       getTableDisplayFieldsLoading: false, // table-loading
+      projectTableHeight: null,
+      anjuanTableHeight: null,
+      juanneiTableHeight: null,
       formVisible: false,
       formTitle: '新建档案',
       formPreviewData: [], // 预览界面data
@@ -103,7 +106,7 @@ export const archivesCrud = {
       this.getTableList()
     },
     // table - list
-    getListCommon(name, type) {
+    getListCommon(name, heightName, type) {
       if (type === 0) {
         this.parentsId = null
       } else if (type === 1) {
@@ -150,6 +153,14 @@ export const archivesCrud = {
             this.yearGroup = data.yearGroup
             this.page.total = data.list.totalElements
 
+            // 自适应高度
+            if (this[name].length === 0 || this[name].length < 10) {
+              this[heightName] = ''
+            } else {
+              const h = '100vh'
+              this[heightName] = `calc(${h} - 434px)`
+            }
+
             if (name === 'anjuanData' || name === 'junneiData') {
               this[name].forEach((item, index) => {
               // 入库状态