1.table-box{//给table外层套得盒子2height:calc();//盒子得高度根据具体项目设置3display:flex;//弹性布局 又可能排列方向是纵向自己加一个 flex-direction4.table{//table标签5height:100%;6flex:auto;7}8} 这是提供了一个思路具体操作不一定是这样的
el-table组件的高度可以通过height属性进行设置。这个属性可以接受一个具体的数值(如400px),也可以接受一个百分比值(如100%),但百分比值需要其父级容器有明确的高度。 3. 使用Vue3的计算属性(calc)动态计算el-table的高度 由于我们想要使用calc函数来计算高度,我们需要确保父级容器的高度是已知的,并且我们可以根据屏...
calcHeight () {this.orgTreeHeight = window.innerHeight -180//this.tableHeight = window.innerHeight - 210this.divHeight = window.innerHeight -180}},mounted () {//console.info('jobOrgNum this', this)window.onresize = () =>{this.calcHeight()}},watch: {'$route'(to,from) {this.calcHei...
你可以通过设置height: auto或使用flexbox布局来实现。 使用height: auto: table { width: 100%; height: auto; } 使用flexbox布局: .table-container { display: flex; flex-direction: column; height: 100%; } .table-container table { flex: 1; overflow: auto; } 在Vue组件中: <template> <div c...
this.orgTreeHeight = window.innerHeight - 180 // this.tableHeight = window.innerHeight - 210 this.divHeight = window.innerHeight - 180 } }, mounted () { // console.info('jobOrgNum this', this) window.onresize = () => { this.calcHeight() ...
这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要使用calc来设置高度,然后给表格设置:height="tableH"的属性 <div class="table-wrapper" ref="tableWrapper" v-loading="loading"> <el-table :data="tableData" stripe style="width: 100%" :height="tableH"> ...
这两天产品新加了这样的一个需求:因为el-table的列挺多的,就想加一个配置列的功能,就是在配置面板里面里面有很多复选框,一个复选框对应一个列的名字。勾选复选框,对应列出现,取消勾选,对应列隐藏。点击保存列配置,就会记住用户想要显示的列和想要隐藏的列,下次再进来页面的时候,用户看到的还是用户上次在配置面...
height: 100vh; box-sizing: border-box; padding: 50px; .proWrap { width: 100%; border: 1px solid #e9e9e9; border-right: 0; border-bottom: 0; // 每行放几组,这里就除于几 .proItem { width: 100% / 3; float: left; // 向左浮动, span { display: inline-block; width: calc(50...
基于element-ui el-table 开发虚拟列表 elelementtable 普通列表主要方法:calcList <template> <div id="app"> <!-- :expand-row-keys="currentExpend" --> <!-- <div style="height: 800px"></div>--> <el-form ref="form" :model="form" label-width="80px" :rules="rules"> <el-form-item...
important; - - .el-scrollbar__view { - height: 100%; - } } .el-scrollbar__bar.is-vertical { right: 0px; } + .el-scrollbar { + height: 100%; + } + + &.has-logo { + .el-scrollbar { + height: calc(100% - 50px); + } + } + .is-horizontal { display: none; }...