描述:当显示区域小于表格列表显示内容时 列表完全撑开表格 无法触发el-table组件的滚动事件
解决:包裹表格的div,加上display: flex;flex-direction: column;即可
<template><div class="table-wrap table-scrollable"><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template><script setup>
const tableData = generateData(20);
function generateData(count) {const data = [];for (let i = 0; i < count; i++) {data.push({date: `2016-05-${i + 1}`,name: 'Tom',address: 'No. 189, Grove St, Los Angeles',});}return data;
}
</script><style>
.table-wrap {height: 200px;overflow: hidden;
}
.table-scrollable {display: flex;flex-direction: column;
}
</style>