elementui 后台管理系统基本框架 表格高度自适应

欢迎使用Markdown编辑器

<!--  -->
<template>
  <div class=''>
    <div>
      <div class="bigbox">
        <el-form ref="formInline" :inline="true" size="small" :model="formItem"
          class="demo-form-inline" label-width="110px">
          <el-form-item label="单位名称">
            <el-input v-model="formItem.key"></el-input>
          </el-form-item>
          <el-form-item label="验收通过时间">
            <el-date-picker v-model="formItem.date" type="daterange" range-separator="-"
              style="width:270px" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
            <el-button type="primary">导出</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="List" :cell-style="{ padding: '5px 0' }" class="tabelDataBox"
          :height="tableHeight"
          :header-cell-style="{background: 'rgb(245,247,250)',color: 'rgb(144,147,153)',}">
          <el-table-column prop="projectId" label="单位编码" show-overflow-tooltip>
          	    <template slot-scope="scope">
            		<span style="color: #007bff; cursor: pointer">{{ scope.row.projectId}}</span>
          		</template>
          </el-table-column>
          <el-table-column prop="projectId" label="单位名称" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <div class="pagination" ref="pagination">
          <el-pagination background @size-change="changePageSize" @current-change="changePage"
            :current-page="page.pageIndex" :page-sizes="[15,20,40,60]" :page-size="page.pageSize"
            layout="total, sizes,jumper, next,pager,prev" :total="page.total"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件(比如：组件，工具js，第三方插件js，json文件，图片文件等等)
//例如：import 《组件名称》 from '《组件路径》';
import { getArea } from '@/axios/api/goods.js'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //只有作为组件选项时起作用
  name: '',
  //这里存放父组件的传值
  props: {},
  data() {
    //这里存放数据
    return {
      formItem: {
        key: '',
        date: []
      },
      tableHeight: null,
      List: [],
      //分页
      page: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
  	getTableHeight(documentHeight, serchHeight, pagetationHeight, otherHeight) {
        return documentHeight - serchHeight - pagetationHeight - otherHeight
    },
    changePage(pageIndex) {
      this.page.pageIndex = pageIndex
    },
    changePageSize(pageSize) {
      this.page.pageSize = pageSize
    }
  },
  //生命周期 - 创建完成(可以访问当前this实例)
  created() {},
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
    this.tableHeight = util.getTableHeight(
      document.documentElement.clientHeight,
      this.$refs.formInline.$el.clientHeight,
      this.$refs.pagination.offsetHeight,
      176
    )
    window.onresize = () => {
      return (() => {
        this.tableHeight = util.getTableHeight(
          document.documentElement.clientHeight,
          this.$refs.formInline.$el.clientHeight,
          this.$refs.pagination.offsetHeight,
          176
        )
      })()
    }
  },
  //生命周期 - 创建之前
  beforeCreate() {},
  //生命周期 - 挂载之前
  beforeMount() {},
  //生命周期 - 更新之前
  beforeUpdate() {},
  //生命周期 - 更新之后
  updated() {},
  //生命周期 - 销毁之前
  beforeDestroy() {},
  //生命周期 - 销毁完成
  destroyed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.pagination {
  background: #fff;
  position: relative;
  display: block;
  /deep/.el-pagination {
    padding: 15px 0px 0px 0px;
    font-weight: 400;
  }

  /deep/.el-pagination__jump,
  /deep/.btn-prev,
  /deep/.el-pager,
  /deep/.btn-next {
    float: right;
  }

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    /* background-color: #4c83eb; */
    color: #fff;
  }
}
.bigbox {
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
}
</style>

或者在此处挂载全局方法