vue中表格或者内容区域高度自适应

vue中表格或者内容区域高度自适应

其实这也算是一个令人头疼的问题吧，我们需要固定某个区域的高度，并且在网页resize的时候变化。
例如

我们在页面中放入一个table，这种固定表头的table需要我们自己给一个高度，
问题1： 这个高度不是也要算出来的吗？
问题2： 这个高度不是也要随着页面的大小自己去适应吗？
于是乎，就借鉴了我们公司一位大牛的思路，写个组件吧，搞个插槽把表格插在中间，高度自己计算就行。

组件名称我就称之为PageWrap

重要： PageWrap组件的高度样式使用了height:100%，所以在使用时，要保证它的父级元素高度固定。不然height:100%就会向上查找，只到找到最近的一个高度固定的父级元素

1. 这个组件提供了两个插槽，一个是pageTop用来放一些筛选用的表单，一个是默认插槽，contentHeight是计算后的内容高度

PageWrap.js

<template>
  <div class="fullList" ref="pageWrap">
    <div ref="pageTop">
      <slot name="pageTop">slot>
    div>

    
    <div ref="pageContent">
      <slot v-bind:contentHeight="contentHeight"> slot>
    div>
  div>
template>

<script>
var _ = require("lodash");
export default {
  name: "PageWrap",
  data() {
    return {
      contentHeight: {},
    };
  },

  mounted() {
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
  },
  destroyed() {
    // 全局监听事件在离开页面时要注销
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    //内容高度
    handleResize: _.debounce(function () {
      let h1 = this.$refs.pageWrap.offsetHeight;
      let h2 = this.$refs.pageTop.offsetHeight;
      let contentHeight = h1 - h2;
      // console.log("contentHeight: ", contentHeight);

      this.contentHeight = contentHeight;
    }, 500),
  },
};
</script>

2. mounted时候添加resize的监听函数，在destroyed时将其销毁。
3. debounce是防抖函数，用来优化计算高度的效率。（这里引入了lodash中的debounce，既然有现成的轮子那就直接用吧O(∩_∩)O哈哈~）

4. 最后这个css也不要忘记了
5. 差点忘记写怎么使用了

<template>
  <PageWrap>
    <template #pageTop>
    
    template>
    <template v-slot:default="slotProps">
      
      <div ref="pageContent">
	  	<el-table
	      :height="tableData.length>0?slotProps.contentHeight - 40:null"
	      :data="tableData"
	      style="width: 100%">
	      <el-table-column
	        prop="date"
	        label="日期"
	        width="180">
	      el-table-column>
	      <el-table-column
	        prop="name"
	        label="姓名"
	        width="180">
	      el-table-column>
	      <el-table-column
	        prop="address"
	        label="地址">
	      el-table-column>
	    el-table>
    template>
  PageWrap>
template>

import PageWrap from "@/common/PageWrap";
export default {
  	components: {
    	PageWrap,
  	},
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }

6. 记得引入和声明哦

如果需要改造的话还可以加上pageFooter，因为项目页面没有需要footer的地方就没有写
如果感觉有用的话就点赞收藏哦o(￣▽￣)ｄ