SOURCE

console 命令行工具 X clear

                    
>
console
// import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';

const doResize = (el,binding,vnode) => {
  const { componentInstance: $table } = vnode
    
  const { value } = binding

  if (!$table.height) {
    throw new Error(`el-$table must set the height. Such as height='100px'`)
  }
  const bottomOffset = (value && value.bottomOffset) || 30

  if (!$table) return

  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
  $table.layout.setHeight(height)
  $table.doLayout()
}

Vue.directive("el-height-adaptive-table", {
   bind(el, binding, vnode) {
     
    el.resizeListener = () => {
      doResize(el,binding,vnode)
    }

    //addResizeListener(el, el.resizeListener)
    window.addEventListener('resize', el.resizeListener)
  },
  update(el,binding,vnode){
    doResize(el,binding,vnode)
  },
  unbind(el) {
    //removeResizeListener(el, el.resizeListener)
    window.removeEventListener('resize',el.resizeListener)
  }
})

new Vue({
  el: '#app',
  components: {

},
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    let data = []
    for (let i = 0; i < 20; i++) {
      this.tableData.push({
        date: '2016-05-0' + i,
        name: '王小虎' + i,
        address: '上海市普陀区金沙江路 1516 弄' + i
      })
    }
  },
  computed: {

}
});
<div id="app">
  <el-table border :data="tableData" ref="table" height="50" v-el-height-adaptive-table="{table: $refs.table}"
  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>
</div>

本项目引用的自定义外部资源