计算页面中 el-table 表格最大高度

Fighting_p

已于 2023-07-14 15:20:15 修改

阅读量659

点赞数

分类专栏：项目问题 elementUI 文章标签： javascript

于 2023-06-06 17:39:38 首次发布

本文链接：https://blog.csdn.net/m0_53562074/article/details/131072762

版权

项目问题同时被 2 个专栏收录

103 篇文章 1 订阅

订阅专栏

elementUI

18 篇文章 0 订阅

订阅专栏

methods: {
  /**
   * ele-table 的 maxHeight 需要根据页面内容进行计算，
   * 【因为】列表没有数据时没有分页容器，获取到的高度为0
   * 【所以】不能再页面初始化的时候计算 ele-table 最大高度，只能在获取到分页数据后进行计算
   * 【注意】在接口获取分页数据成功之后计算 ele-table 最大高度
   */
  getTableHeight() {
    const AppMain = document.querySelector('.AppMain') // 内容区域容器
    const searchForm = document.querySelector('.searchForm') // 搜索区域容器
    const tableTopBtns = document.querySelector('.ele-table-button-group') // 表格顶部按钮容器
    const tablePagination = document.querySelector('.ele-table-pagination') // 分页容器
    const AppMainHeight = (AppMain && AppMain.offsetHeight) || 0
    const searchFormHeight = (searchForm && searchForm.offsetHeight) || 0
    const tableTopBtnsHeight = (tableTopBtns && tableTopBtns.offsetHeight) || 0
    const tablePaginationHeight = (tablePagination && tablePagination.offsetHeight) || 0
    return AppMainHeight - searchFormHeight - tableTopBtnsHeight - tablePaginationHeight
  },
  // 在接口获取分页数据成功之后调用 setTableHeight 方法，计算 ele-table 最大高度
  setTableHeight() {
    this.$nextTick(() => {
      this.tableMaxHeight = this.getTableHeight()
    })
  }
}

优化

/** ** ele-table 最大高度计算 ****/
export const EleTableMixin = {
  data() {
    return {
      tableData: [],
      tableMaxHeight: 400,
      total: 0
    }
  },
  computed: {
    options() {
      return {
        data: this.tableData,
        maxHeight: this.tableMaxHeight
      }
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.setTableHeight()
    })
  },
  methods: {
    /**
     * ele-table 的 maxHeight 需要根据页面内容进行计算，
     * 【因为】列表没有数据时没有分页容器，获取到的高度为0
     * 【所以】不能再页面初始化的时候计算 ele-table 最大高度，只能在获取到分页数据后进行计算
     * 【注意】在接口获取分页数据成功之后计算 ele-table 最大高度
     */
    getTableHeight() {
      const AppMain = document.querySelector('.AppMain')
      const searchForm = document.querySelector('.searchForm')
      const tableTopBtns = document.querySelector('.ele-table-button-group')
      const tablePagination = document.querySelector('.ele-table-pagination')
      const AppMainHeight = (AppMain && AppMain.offsetHeight) || 0
      const searchFormHeight = (searchForm && searchForm.offsetHeight) || 0
      const tableTopBtnsHeight = (tableTopBtns && tableTopBtns.offsetHeight) || 0
      const tablePaginationHeight = (tablePagination && tablePagination.offsetHeight) || 0
      return AppMainHeight - searchFormHeight - tableTopBtnsHeight - tablePaginationHeight
    },
    // 在接口获取分页数据成功之后调用 setTableHeight 方法，计算 ele-table 最大高度
    setTableHeight() {
      this.$nextTick(() => {
        this.tableMaxHeight = this.getTableHeight()
      })
    },
    // 序号处理
    indexMethod(index) {
      return (this.searchForm.page - 1) * this.searchForm.rows + index + 1
    }
  }
}