element ui的表格高度自适应

		如何自动计算element ui的表格高度 达到撑满页面的效果
		本来想用指令实现的发现各种报错 最后无奈选择v-bind绑定

1 写一段mixin

mixin部分

import getMaxHeight from "@/mixin/function/fillTable";

const Mixin = {
  data() {
    return {}
  },

  computed: {
    GetMaxHeight: {
      //计算表格剩余最大高度
      get: () => (className = 'filtable') => getMaxHeight(className)
    },
  },
  methods: {}
}


export default Mixin

mixin高度计算部分

export default function getMaxHeight(className) {
	// 导航栏部分高度 + 页脚分页的高度
  let page = 60
  let el = document.getElementsByClassName(className)[0]
  let h = findParentElement_Height(el)
  let windHeight = window.innerHeight
  let resultH = windHeight - (h + page)
  const handler = {
    get: function (target, prop, receiver) {
      return Reflect.get(...arguments);
    },
    set(target, prop, receiver) {
      return Reflect.set(...arguments);
    },
  };
  const proxy = new Proxy({}, handler);
  // resultH undefined -> 导致计算为NaN
  if (!isNaN(resultH)) {
    proxy.height = resultH
  }
  return proxy
}


function findParentElement_Height(el) {
  if(el){
	  // 获取表格元素位于浏览器顶部高度
    return el.getBoundingClientRect().top
  }
}

vue部分

<el-row class='filtable'>
 <el-table  ref="tableRef" :data="TableDate" v-bind="GetMaxHeight()">
	<el-table-column label="序号"  width="50" type="index"></el-table-column>
	 <el-table-column label="创建人" prop="create_by" width="80"></el-table-column>
	 <el-table-column label="创建时间" prop="create_time" width="80"></el-table-column>
	 <el-table-column label="更新人" prop="update_by" width="80"></el-table-column>
	 <el-table-column label="更新时间" prop="create_time" width="80"></el-table-column>
</el-table>
</el-row>

2 表格错位解决方案

/**
* 在表格查询后 可能会出现错位 
* 通过update生命周期中 重新对表格渲染
**/
updated(){
   this.$nextTick(() => {
     this.$refs.tableRef.doLayout()
   })
 },