关于el-table添加fixed或fixed=“right“无横向滚动条的解决方法
解决方法:
- 确保
el-table
外层布局容器有固定宽度或最大宽度,以便于表格能够超出容器部分时能滚动。 - 确保
el-table
的父元素(或者更上层的元素)没有设置overflow: hidden
属性,这会导致滚动条不显示。 - 如果使用了
el-table
的height
属性,确保它被设置为一个具体的数值,否则可能导致滚动条不生效。 - 如果是在
el-table
内部某个el-table-column
设置了fixed
属性,确保这个列宽之和加上其他非fixed
列宽之和超过了el-table
的总宽度,才会出现横向滚动条。
示例代码:
<template>
<div style="width: 100%; overflow: auto;">
<el-table :data="tableData" style="width: 100%" max-height="250">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" fixed="right" />
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
// ...数据项
]
};
}
};
</script>
确保外层div
设置了overflow: auto
,内层el-table
设置了width: 100%
和max-height
属性,并且有fixed="right"
的列。这样就能在表格宽度超出容器宽度时出现横向滚动条。
评论已关闭