console
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)
}
window.addEventListener('resize', el.resizeListener)
},
update(el,binding,vnode){
doResize(el,binding,vnode)
},
unbind(el) {
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>