elementPlus el-table如何在固定的宽度内,每一列都等比缩放,不显示横向滚动条。
在Element Plus的el-table
组件中,要使得表格在固定宽度内等比缩放,同时不显示横向滚动条,可以通过设置el-table
的max-height
属性和el-table-column
的min-width
属性来实现。这样,当窗口尺寸变化时,表格会等比缩放,但不会超出设定的宽度,因此不会出现滚动条。
以下是一个简单的示例代码:
<template>
<el-table
:data="tableData"
style="width: 100%;"
max-height="400px"
>
<el-table-column
v-for="item in columns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:min-width="item.minWidth"
>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// ...数据项
],
columns: [
{ label: '日期', prop: 'date', minWidth: 100 },
{ label: '姓名', prop: 'name', minWidth: 100 },
{ label: '地址', prop: 'address', minWidth: 200 },
// ...更多列
],
};
},
};
</script>
在这个例子中,max-height
设置了表格的最大高度,防止表格在列数据较少时显得过高。min-width
则为每个列设置了最小宽度,确保即使窗口尺寸变化,列宽也不会小于这个值。通过调整minWidth
属性值,可以控制列宽等比缩放的比例。
评论已关闭