el-table横纵向滚动条固定在可视屏幕内,并自适应分辨率(2.0)
在 Element UI 2.0 (即 Element Plus) 中,要实现 el-table
横向滚动条固定并且自适应分辨率,可以使用 CSS 的固定定位来实现。以下是一个简单的示例:
- 首先,确保你的
el-table
外层有一个容器,比如div
,并设置一个固定的宽度。 - 对该容器使用
position: relative;
以便于内部的滚动容器定位。 - 对
el-table
使用position: absolute;
并设置left: 0;
来固定表格的横向滚动条。 - 使用 CSS 媒体查询来根据屏幕宽度调整固定宽度的容器。
HTML 结构示例:
<template>
<div class="table-container">
<el-table :data="tableData" fixed="left">
<!-- 列配置 -->
</el-table>
</div>
</template>
CSS 样式示例:
<style>
.table-container {
width: 100%;
overflow-x: auto;
position: relative;
}
.table-container .el-table {
position: absolute;
left: 0;
width: fit-content; /* 根据实际内容调整宽度 */
}
/* 可以添加媒体查询来适应不同分辨率 */
@media screen and (max-width: 1200px) {
.table-container {
width: 1000px; /* 适应1200px以下分辨率 */
}
}
</style>
JavaScript 数据示例:
<script>
export default {
data() {
return {
tableData: [
// 数据列表
]
};
}
};
</script>
这样,当屏幕宽度变化时,由于使用了媒体查询,.table-container
的宽度会相应变化,el-table
的横向滚动条就会始终固定在可视屏幕内。
评论已关闭