vue中表格或者内容区域高度自适应
vue中表格或者内容区域高度自适应其实这也算是一个令人头疼的问题吧,我们需要固定某个区域的高度,并且在网页resize的时候变化。例如我们在页面中放入一个table,这种固定表头的table需要我们自己给一个高度,问题1: 这个高度不是也要算出来的吗?问题2: 这个高度不是也要随着页面的大小自己去适应吗?于是乎,就借鉴了我们公司一位大牛的思路,写个组件吧,搞个插槽把表格插在中间,高度自己计算就行。
·
vue中表格或者内容区域高度自适应
其实这也算是一个令人头疼的问题吧,我们需要固定某个区域的高度,并且在网页resize的时候变化。
例如
我们在页面中放入一个table,这种固定表头的table需要我们自己给一个高度,
问题1: 这个高度不是也要算出来的吗?
问题2: 这个高度不是也要随着页面的大小自己去适应吗?
于是乎,就借鉴了我们公司一位大牛的思路,写个组件吧,搞个插槽把表格插在中间,高度自己计算就行。
组件名称我就称之为PageWrap
重要: PageWrap
组件的高度样式使用了height:100%
,所以在使用时,要保证它的父级元素高度固定。不然height:100%
就会向上查找,只到找到最近的一个高度固定的父级元素
- 这个组件提供了两个插槽,一个是pageTop用来放一些筛选用的表单,一个是默认插槽,
contentHeight
是计算后的内容高度
PageWrap.js
<template>
<div class="fullList" ref="pageWrap">
<div ref="pageTop">
<slot name="pageTop"></slot>
</div>
<!--表格内容 或者其他-->
<div ref="pageContent">
<slot v-bind:contentHeight="contentHeight"> </slot>
</div>
</div>
</template>
<script>
var _ = require("lodash");
export default {
name: "PageWrap",
data() {
return {
contentHeight: {},
};
},
mounted() {
this.handleResize();
window.addEventListener("resize", this.handleResize);
},
destroyed() {
// 全局监听事件在离开页面时要注销
window.removeEventListener("resize", this.handleResize);
},
methods: {
//内容高度
handleResize: _.debounce(function () {
let h1 = this.$refs.pageWrap.offsetHeight;
let h2 = this.$refs.pageTop.offsetHeight;
let contentHeight = h1 - h2;
// console.log("contentHeight: ", contentHeight);
this.contentHeight = contentHeight;
}, 500),
},
};
</script>
mounted
时候添加resize的监听函数,在destroyed时将其销毁。debounce
是防抖函数,用来优化计算高度的效率。(这里引入了lodash
中的debounce,既然有现成的轮子那就直接用吧O(∩_∩)O哈哈~)
<style scoped>
.fullList {
height: 100%;
overflow: hidden;
}
</style>
- 最后这个css也不要忘记了
- 差点忘记写怎么使用了
<template>
<PageWrap>
<template #pageTop>
</template>
<template v-slot:default="slotProps">
<!--表格内容-->
<div ref="pageContent">
<el-table
:height="tableData.length>0?slotProps.contentHeight - 40:null"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
</PageWrap>
</template>
import PageWrap from "@/common/PageWrap";
export default {
components: {
PageWrap,
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
- 记得引入和声明哦
如果需要改造的话还可以加上pageFooter,因为项目页面没有需要footer的地方就没有写
如果感觉有用的话就点赞收藏哦o( ̄▽ ̄)d
更多推荐
已为社区贡献4条内容
所有评论(0)