vue-element-admin table 只有100px高度问题

一、问题描述

在使用 table自动设置高度时 v-el-height-adaptive-table="{ bottomOffset: 60 }"，发现只有100px,在调试的时候有设置高度，等数据更新后就成100px了。

100px来源 <el-table height="100px"

代码大概如下，
把代码全局引入
<el-table height="100px" :data="tableData" v-el-height-adaptive-table="{bottomOffset: 60}"

data(){
return {
tableData:[]
}},
mounted(){
this.getList()
},
methods:{
async getList(){
const d= await xxx()
this.tableData = d
}
}

在代码调试中，第一次是有设置 高度的，但随后数据渲染上去，高度变回 100px ,扣除列头，table body 只剩55px ,需要触发resize才有效。

 

二、解决方法

在 directive/el-table/adaptive.js 中 export default 加入如下代码

componentUpdated(el,binding,vnode){
    doResize(el,binding,vnode)
  },

export default {
  bind(el, binding, vnode) {
    el.resizeListener = () => {
      doResize(el, binding, vnode)
    }
    // parameter 1 is must be "Element" type
    addResizeListener(window.document.body, el.resizeListener)
  },
  inserted(el, binding, vnode) {
    doResize(el, binding, vnode)
  },
//----加入以下这段代码
  componentUpdated(el,binding,vnode){
    doResize(el,binding,vnode)
  },
//------结束
  unbind(el) {
    removeResizeListener(window.document.body, el.resizeListener)
  }
}

参考

1.github

2.Vue 自适应高度表格