首先在el-table中动态绑定一个高度:height="tableHeight",并在data中声明tableHeight。 <el-tableref="multipleTable":data="tablist"style="width: 100%"v-if="tableHeight":height="tableHeight"></el-table> 280为页面固定头部的高度,可根据不同的页面需求更改 data(){return{tableHeight:window.innerHeight...
& >.table_container{height:calc(100%-80px); } 总结: 通过css来设置外部容器高度, 使得外部容器可以跟随页面大小的改变而改变; 为el-table设置height属性会直接写入到其DOM的style属性中, 也因此可以实现跟随外部容器大小的变化而变化 失败的实验: 通过el-table的max-height属性中写入calc()来动态计算高度, 但是...
实现 el-table 高度自适应页面，以适应不同浏览器和屏幕尺寸，是前端开发中常见需求。首先，为页面设置一个固定头部高度，例如280像素，可根据具体页面需求进行调整。其次，通过监听 screen.height 的变化，动态调整 el-table 的高度，确保其能够自适应不同尺寸的屏幕。具体实现上，可以利用 JavaScript 的 ...
</el-table-column> </el-table> </div> </div> </template> data() { return { tableHeight: window.innerHeight - 260, //表格动态高度 screenHeight: window.innerHeight, //内容区域高度 table1_info: { title: '表格1', tableData11: [ { '值1': '1', '值2': '2', '值3': '3' }...
el-dialog 的body 自适应通常是通过设置其高度为 auto 或者不设置高度来实现的,这样它会根据内容自动调整高度。但是,由于 el-dialog 有自己的滚动机制,当内容超出时会自动出现滚动条。 3. 研究如何在 el-dialog 内部为 table 设置合适的高度 为了在 el-dialog 内部为 table 设置合适的高度,我们可以使用 CSS 样式...