el |
您所在的位置：网站首页 › html设置表格高度 › el |
el
|
根据element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css，如： max-height:calc(100vh - 40px) //或者 max-height:calc(100% - 40px)受网友启发，实现思路： 通过js计算表格的最大高度，然后将高度数值传给el-table的max-height属性，上代码： html： ...js： export default { data() { return { tableHeight: 0 } }, mounted() { this.tableHeight = window.innerHeight - 50; // 后面的50：根据需求空出的高度，自行调整 }, ... } 亲测，不行。。。网上大部分这个答案，但确实不行
于是，我看了下源码，发现el-table的max-height是有做监听的，所以，后期确实可以更改值，思路是对的，经过几番折腾，加上nextTick就可以了： export default { data() { return { tableHeight: 0 } }, mounted() { this.$nextTick(() => { this.tableHeight = window.innerHeight - 50; //后面的50：根据需求空出的高度，自行调整 }) }, ... }好啦，我觉得这个方式也不是特别完美，完美的做法是：提个issue，让element-ui可以支持max-height接收除px和数值之外的其他css，如：max-height:calc(100vh - 40px)。 番外： 更优雅的解决方案： 该方案只适用于element-ui2.7.2及以下的版本，2.8.0及以上max-height不支持百分百，只支持px和数值，是因为官网为修复该issue 现在发现max-height的合法的值除了数字或者单位为 px ，还可以是百分比，例如：max-height=“100%”这样设置是可以的。所以响应的动态设置el-table的max-height，我有了更优雅的解决方案，无需js，纯css，亲测有效： .wrapper{ height: calc(100% - 40px); } ... ...至于2.8.0及以上的版本，第一种方案依然有效，如果你有更好的方案，欢迎评论~ |
【本文地址】
今日新闻 |
推荐新闻 |