element-ui中el-table和el-form以及分页器el-pagination联合使用时——出现滚动条及解决办法

一. 页面结构

页面的内容主要有三个板块:1.上面的搜索框部分(el-form部分),2.中间展示内容的部分(el-table部分) ,3.下面的分页器部(el-pagination部分),代码结构如下:

<el-form inline >
  <el-form-item ></el-form-item>
  ...
</el-form>

<el-table :data="tableData" type="flex" :max-height="getTableHeight">
  <el-table-column></el-table-column>
  ...
</el-table>

<el-pagination
  background
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[5, 10, 20, 30, 40]"
  :page-size="currentSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

效果图如下:
在这里插入图片描述

二. 遇到的问题

2.1 分页器下拉展示项有5,10,20,30,40这几种选项,默认每页显示5页的时候,没有什么问题;但是在改为每页显示20页的时候,页面出现了滚动条,并且向下滚动的时候,整个页面里面的内容会全部跟着向下滚动,现在界面效果如下:
在这里插入图片描述

三. 造成的影响

3.1 选择每页显示20条这种的时候,下面的分页器直接不见了

3.2 选择每页显示20条这种的时候,整个页面内容会跟着滚动,当我想重新搜索的时候需要重新滚到顶部(应该做到的效果是上面的搜素部分不应该跟着滚动,应固定在一个位置不动,这样方便随时可以搜索)

四. 分析问题产生的原因

4.1 当页面的内容高度(或宽度)超过容器(装这些内容的容器)的高度(或宽度)时,就会产生纵向(或横向)滚动条,页面内容从上到下排版为1.搜索部分(el-form)、2.中间内容显示(el-table),3.底部分页器(el-pagination)。

4.2 而页面显示的高度有限,当选择每页显示20条时,分页器就被挤出了可视区域,一直往下滑动才能看到分页器部分;同理,当向下滑动的时候,顶部的搜索框就看不到了,需要重新滑到顶部才能看到搜索部分。

五. 解决办法

5.1 在当前浏览器显示页面的有限高度内,顶部搜索框部分的高度是固定的,不需要改变,底部分页器的高度是固定的,也不需要改变。中间table展示内容的部分,高度是不固定的,选择每页展示的条数不同,对应的高度就不同。

5.2 所以解决办法就是将el-table的高度固定,通过设置el-table的一个max-height属性来保证

  搜索框高度(el-form) + 中间内容高度(el-table) + 分页器高度(el-pagination) <=  当前页面可以展示的高度 

就不会出现滚动条,而el-table里面多出的内容就在el-table自己产生的滚动条里滚动,问题完美解决.

5.3 代码实现如下:

<template>
  <div>
    <el-form inline >
    <el-form-item ></el-form-item>
    ...
    </el-form>

    <el-table :data="tableData" type="flex" :max-height="getTableHeight">
      <el-table-column></el-table-column>
      ...
    </el-table>

    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30, 40]"
      :page-size="currentSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
data() {
  return {
    screenHeight: document.body.clientHeight // 初始化时获取当前打开页面的高度
  }
},
mounted(){
  // 窗口或页面被调整大小时触发事件
  window.onresize = () => {
    // 获取body的高度
    this.screenHeight = document.body.clientHeight
  }
},
computed: {
  // 根据当前窗口高度动态设置el-table的显示高度,避免出现不必要的滚动条
  // 以及由于el-table内容过长而导致的分页器无法显示在当前看到的界面
  // X的值为页面除了el-table以外,el-table的其他兄弟标签的高度和(本例中为el-form与el-pagination的高度和)
  // X的值可以不用特意获取,写个大概值,然后再调。
  getTableHeight() {
    return this.screenHeight - X
  }
},
</script>

现在不管选择每页显示多少条都不会出现问题了,效果如下:

1.选择5条/页时:
在这里插入图片描述
2.选择20条/页时:
在这里插入图片描述
3.选择40条/页时:
在这里插入图片描述

六. 文末

6.1 刚开始时,我的screenHeight的初始赋值为0,出现了这么一个状况,页面打开时,我切换选择每页显示条数,仍然出现了滚动条及看不见分页器的情况,但是只要现在窗口稍微有一点点变化,就会恢复正常的显示。

6.2 产生该问题的原因就在于mounted生命周期里面设置的window.onresize事件,是要页面窗口发生变化时才会触发;但是刚打开页面的时候,我们可能会始终保持一个页面不动,而此时computed计算出来的el-table的高度为-X,显然是不对的,所以在选择切换每页显示条数后就出错了。

6.3 那么table的初始值就应该为一个正确的值(为document.body.clientHeight),也就是我们需要获取刚打开页面时,页面内容的高度,这样计算属性计算出的值才是el-table正确的最大高度。

讨论数量: 0

慎思笃行