vue-动态计算el-table高度,告别页面多余滚动条

首先看看传统写死的高度600px

在正常的大屏效果是没有问题--这里就

    <el-table
      v-loading="loading"
      max-height="600px"
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="tableHeaderColor"
      :row-style="tableRowStyle"
    >
      <el-table-column label="序号" align="center" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      ......
      //省略...
    </el-table>

小屏下就会出现两条滚动条,页面自身一条-table 中一条, 很丑

先来分析一下页面结构分析

上代码 在跟src下的components文件中创建一个mixins文件夹,再创建getTableHeight.js 文件 注意,下面js代码中获取页面元素,需要换成你页面上的元素

import { mapGetters } from 'vuex'
const mixin = {
  data () {
    return {
      listInfo: {
        tableHeight: 0 // 表格最大高度
      },
      options: {
        isMobile: false,
        isAndroid: false,
        isIpad: false
      }
    }
  },
  watch: {
    fullScreen () {
      this.listInfo.tableHeight = this.getTableHeight()
    }
  },
  computed: {
    ...mapGetters(['fullScreen'])
  },
  mounted () {
    this.setClient()
    this.listInfo.tableHeight = this.getTableHeight()
    window.addEventListener('resize', () => {
      // 最后赋值给页面的高度
      this.listInfo.tableHeight = this.getTableHeight()
    })
  },
  methods: {
    // 判断客户端
    setClient () {
      if (
        navigator.userAgent.match(
          /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        this.options.isMobile = true
        if (navigator.userAgent.match(/(iPad)/i)) {
          this.options.isIpad = true
        } else if (navigator.userAgent.match(/(Android)/i)) {
          this.options.isAndroid = true
        }
      }
    },
    detectOrient () {
      if (Math.abs(window.orientation) === 90) {
        // 横屏
        this.options.isRote = true
      } else {
        // 竖屏
        this.options.isRote = false
      }
    },
    getTargetClass () {
      // 获取目标类名
      // 兼容element表格和原生表格,如需在其他原生表格使用则需要添加类名 .en-table
      const els = ['el-table', 'en-table']
      for (const _ of els) {
        const currDom = document.getElementsByClassName(_)
        if (currDom.length !== 0) return _
      }
      return ''
    },
    getTableHeight () {
      // 当表格存在的时候才执行操作
      const targetClassName = this.getTargetClass()
      if (targetClassName === '') return
      // 页面总视图高度
      const boxH = document.body.clientHeight

      // 头部高度
      const Header = document.getElementsByClassName('Header')[0]
        ? document.getElementsByClassName('Header')[0].clientHeight
        : 0
      // 导航条高度
      const arrowBars = document.getElementsByClassName('el-breadcrumb')[0]
        ? document.getElementsByClassName('el-breadcrumb')[0].clientHeight
        : 0
      // 自定义模块高度
      const addstorage = document.getElementsByClassName('addstorage')[0]
        ? document.getElementsByClassName('addstorage')[0].clientHeight + 58
        : 0

      const WarehouseTab = document.getElementsByClassName('Warehouse-tab')[0]
        ? document.getElementsByClassName('Warehouse-tab')[0].clientHeight + 15
        : 0
      // 页面底部高度
      const Footer = document.getElementsByClassName('Footer')[0]
        ? document.getElementsByClassName('Footer')[0].clientHeight
        : 0
      // console.log(Footer, '底部高度')
      const pagination = document.getElementsByClassName('pagination')[0] || {
        clientHeight: 0
      }
      const pagerH = pagination.clientHeight ? pagination.clientHeight : 0
      const tab = document.getElementsByClassName(`${targetClassName}`)[0] || {
        offsetTop: 0
      }
      // table顶部距离
      const tabOffT = tab.offsetTop + 20 // +20是admin的margin
      this.options.isMobile
        ? ''
        : (document.getElementsByClassName(
          `${targetClassName}`
        )[0].style.height =
            boxH -
            Header -
            Footer -
            tabOffT -
            pagerH -
            WarehouseTab -
            addstorage +
            'px')
      let height =
        boxH - Header - Footer - tabOffT - pagerH - WarehouseTab - addstorage
      return this.options.isIpad
        ? height + 30
        : this.options.isAndroid
          ? height + 95
          : height
    },
    // 在el-table中添加
    // 设置表头行样式 :header-cell-style="tableHeaderColor"
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      return 'background-color:#F4F4F4;text-align:center'
    },
    //  设置表格行样式 :row-style="tableRowStyle"
    tableRowStyle ({ row, rowIndex }) {
      return 'font-size:25px; color:red;'
    },
    // 设置颜色 :row-class-name="tableRowClassName"
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    }
  }
}

export default mixin

组件中使用

引入mixin

import getTableHeight from '@/mixins/getTableHeight.js'

混入

  mixins: [getTableHeight]

html

        <el-table
          v-loading="loading"
          :max-height="listInfo.tableHeight || undefined"
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="tableHeaderColor"
          :row-style="tableRowStyle"
        >
          <el-table-column label="序号" align="center" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.userId }}</span>
            </template>
          </el-table-column>
          ....
        </el-table>

看看效果

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 10px; /*滚动条宽度*/
    height: 10px; /*滚动条高度*/
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    /*滚动条的背景区域的内阴影*/
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) inset;
    /*滚动条的背景区域的圆角*/
    border-radius: 10px;
    /*滚动条的背景颜色*/
    background-color: #eee;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条的内阴影*/
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) inset;
    /*滚动条的圆角*/
    border-radius: 10px;
    /*滚动条的背景颜色*/
    background-color: #ddd;
  }