一、问题描述
在使用 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)
}
}
参考