vue项目中element-tabel自动计算高度

要求：页面上布局是头部-面包屑，中间-表格，底部-分页组件。需要使表格高度需要自适应屏幕

解决思路：本项目是vue2，使用mixin混入方法计算出当前屏幕可供表格展示的高度。再设置成该表格高度

1.创建文件夹-mixins,再添加estimateTableHeight.js文件
其文件内容如下

export default {
  data () {
    return {
      tableHeight: 0,
      isCollapse: true
    }
  },
  watch: {
    isCollapse () {
      this.estimateTableHeight()
    }
  },
  mounted () {
    this.estimateTableHeight()
    window.addEventListener('resize', () => { this.estimateTableHeight() })
  },
  beforeDestroy () {
    window.removeEventListener('resize', () => { this.estimateTableHeight() })
  },
  methods: {
    estimateTableHeight (isCollapsed) {
      this.$nextTick(
        () => {
          let h = document.documentElement.clientHeight
          if (this.$refs.breadCrumb) { // 页面上如果有面包屑区域徐减去它的高度
            h = h - this.$refs.breadCrumb.$el.offsetHeight
          }
           if (this.$refs.nagivaion) { // 页面上如果有分页区域徐减去它的高度
            h = h - this.$refs.breadCrumb.$el.offsetHeight
          }
          this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度
          return h
        }
      )
    }
  }
}

2.使用时

首先先import导入js文件，mixins中使用

import estimateTableHeight from '@/mixins/estimateTableHeight'

export default {
 mixins: [estimateTableHeight],
}

后在tabel中加上这个
:height="tableHeight

3.完整代码:

<template>
  <div class="app-container">
    <el-breadcrumb ref="breadCrumb" separator-class="el-icon-arrow-right" style="padding:10px">
      <el-breadcrumb-item :to="{ path: '/biz/task' }">{{$t('breadcrumb.taskList')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="table-container">
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        style="width: 100%;"
        :height="tableHeight"
        size="mini"
        border
        fit
        highlight-current-row
        :header-cell-style="{
          'background-color': '#fafafa',
          'color': 'black',
          'border-bottom': '1px solid #c0c0c0'
        }"
      >
        <template slot="empty">
        </template>
        <el-table-column
          :label="$t('databaseField.taskID')"
          align="center"
          max-width="80"
          prop="id"
        >
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column :label="$t('databaseField.taskName')" align="center" min-width="90">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        ...其他列
      </el-table>
      <pagination
        :total-count="totalCount"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div class="pagination-block">
	    <el-pagination
	      :total="totalCount"
	      layout="total, sizes, prev, pager, next, jumper"
	      :page-size="100"
	      :current-page="currentPage"
	      :page-sizes="[10, 20, 30, 40]"
	      @size-change="handleSizeChange"
     	  @current-change="handleCurrentChange"
	    />
	 </div>	
  </div>
</template>
<script>
// 获取方法
import estimateTableHeight from '@/mixins/estimateTableHeight'

export default {
  name: 'RoleCfgList',
  mixins: [estimateTableHeight], // 混入方法
  data () {
    return {
      list: [],
      listLoading: false,
      totalCount: 0,
      pageIndex: 1,
      pageSize: 10,
      searchParams: '',
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData (val, serachFlag) {
      this.listLoading = true
      this.searchParams = val
      const filterMap = val
      this.pageIndex = serachFlag ? 1 : this.pageIndex
      this.totalCount = serachFlag ? 0 : this.totalCount
    // 接口获取数据
    },
    handleSizeChange (val) {
      this.listLoading = true
      this.pageSize = val
      this.fetchData(this.searchParams)
    },
    handleCurrentChange (val) {
      this.listLoading = true
      this.pageIndex = val
      this.fetchData(this.searchParams)
    }
  }
}
</script>

实现效果