引言
公司新项目决定采用Vue3+Element Plus+Vite进行搭建。说说自己在开发中遇到的小问题及目前的解决方案。
表格组件
表格开发通常采用固定表头的格式。在Element的Table组件中有属性height和max-height可以控制固定表头格式。 在之前Vue2+Element中，通过弹性布局来自适应表格父容器的高度，再通过表格自身的height属性即可完美进行适配，如下代码:
<div class="table-container">
<el-table :data="tableData" height="100%">
......
</el-table>
</div>
<style>
.table-container {
flex:1;
min-height: 1px;
}
</style>
但是在切换了Vue3+Element Plus时，使用同样的方法却遇到了问题，发现设置表格height=“100%”并不会随着父级的改变而改变，仅在初次dom渲染的时候有效，无奈只能先通过代码控制监听，之前Vue2中有mixin，现在Vue3有了组合式API，所以有了本次尝试。 新建一个js文件，我这里在utils目录下新建table.js，代码如下：
/**
* 此为用于监听table动态高度的组合式api，需在表格容器上添加ref=“tableContainer”便于动态获取容器高度
*/
import { ref, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
export default function () {
const tableHeight = ref(100)
const tableTimer = ref(0)
const { proxy } = getCurrentInstance()
onMounted(() => {
window.addEventListener('resize', onResize)
calcHeight()
})
onBeforeUnmount(() => {
tableTimer.value && clearTimeout(tableTimer.value)
window.removeEventListener('resize', onResize)
})
function onResize() {
tableTimer.value && clearTimeout(tableTimer.value)
// 设定定时器
tableTimer.value = setTimeout(() => {
calcHeight()
}, 500)
}
function calcHeight() {
nextTick(() => {
if (proxy.$refs.tableContainer) {
const rect = proxy.$refs.tableContainer.getBoundingClientRect()
tableHeight.value = rect.height
}
})
}
return {
tableHeight
}
}
然后在需要的地方直接引入即可：
<div ref="tableContainer" class="table-container">
<el-table :data="tableData" border :max-height="tableHeight">
......
</el-table>
</div>
// 引入监听table高度变化组合式api
import table from "@/utils/table"
const { tableHeight } = table()
因为表格下面还有一个分页组件且分页组件在无数据时候是隐藏的，所以在每次请求回表格数据后再次给tableHeight进行赋值即可：
tableHeight = table()
