vue3.0 composition api下mixins的替代方式(自定义hooks):
计算 table列表的响应式高度:
1.新建heightHooks.js
import { ref, onMounted ,nextTick} from 'vue'
export default function () {
const tableHeight= ref(0)
onMounted(() => {
nextTick(()=>{
let windowHeight = document.documentElement.clientHeight;
tableHeight.value = windowHeight - 500;
})
})
return {
tableHeight
}
}
2.vue页面中引用
setup() {
const mainHeight = heightHooks();
return{
mainHeight
}
}
3.高度绑定:
<el-table :data="tableData" :max-height="mainHeight.tableHeight.value">
</el-table>