mounted() { // 重置浏览器高度 window.onresize = () => { this.clientHeight = document.documentElement.clientHeight; } }, 1. 2. 3. 4. 5. 6. created() { // 初始值,自己定义 this.tableHeight = this.clientHeight - 126 }, 1. 2. 3. 4. watch: { // 监听高度变化 clientHeight(newVal...
Element-UI 中的 el-table 提供了设置高度的选项,在代码中设置 height 属性就可以现在表格的高度,数据量过多也只会在表格内部生成滚动条,而不是整个页面生成滚动条。 但是这个高度需要固定的数值,不同的分辨率或者缩放后的浏览器使用固定高度后,不能满足只在 el-table 内部生成滚动条的条件。 想要满足上述条件就需...
elementui table表格动态高度设置 data:{tableHeight:""} beforMount(){ let bodyHeight=document.documentElement,clienHeight||document.body.clientHeight; } mounted(){ const that=this; window.onresize=()=>{ return(()=>{ window.bodyHeight=document.documentElement,clienHeight||document.body.clientHeight; ...
</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' }, { '值1': '11'...
elementui提供的el-table其实挺不错,不过有时候可能还需要对其进行样式的修改。官方也提供了相应的表格属性,方便我们去修改对应的样式,但是有的时候可能会少了点什么。 比如:想要把表格的高度都尽可能设置小点,这样的话,页面就可以展示更多行更多条数据了。但是单单使用下图中的表格的属性,发现没法让表格的高度设置最...
<el-table:data="tableData"id="table":height='tableH'></el-table> 2.获取浏览器高度并监听浏览器resize变化 getTableHeight函数里根据元素做了一些计算处理,获取浏览器高度并计算得到表格所用高度。 data:function(){return{tableH:"",}}mounted(){this.getTableHeight();window.addEventListener('resize',thi...
最近在使用element-ui table表格的时候又踩坑了,前一秒还在牛逼哄哄的边跟同事扯皮边码代码,下一秒就翻车了。话不多说,直接上正题。 公司的项目架构,表格的的表头与内容都是后台统一返回、前端只要简单处理一下表格的自定义高度就完事,但是就在做表头数据填充的时候翻车了,设置了表格高度刚好占满屏幕,但是表格底部...
element el-table 单元格高度 elementel-table单元格高度 在ElementUI的el-table组件中，可以通过设置单元格的高度来调整单元格的外观。具体来说，可以通过以下两种方式来设置单元格的高度：1.在el-table组件上设置row-height属性，例如设置为50px：2.html复制代码 <el-table:data="tableData"row-height="50"><!