大家好，又见面了，我是你们的朋友全栈君。
分析
如下图(此方案中使用的是Element Table官网copy的代码(多用于OA, CMS, ERP这类系统中)
如上图大体目前没有问题，但是存在细节问题那就是在table在滚动的过程中表头没有了
如果说这里的列比较多，用户需要查看的数据在最后面，每次某个列的数据对应的是什么意思(尤其是表格数字比较多的话,非常恼火)，需要上下来回滚动table 内容才能解决
所以说我们要解决的就是表头固定 ①(标记问题)
表头固定简单 官方提供prop => height，那继续看下图
我们的用户群在使用产品的过程中, 不可能说是固定用同样大小屏幕
假设我们这里设置了固定高度600px
那有些用户使用过程中 将窗口缩小了 不够600px
就会出现 table的body中一个滚动条 table外面的容器出现一个滚动条
还有就是有些用户使用的是大屏幕,很显然600px可能只占了他屏幕的一半，这里数据又多
就又出现新的问题，明明我屏幕可以显示完，产品这里只占了一半 然后开始滚动
所以新的问题高度如何设置，才能使我们适应各种用户②
我们这里想到一个办法，动态计算并且将table的height设置为父节点的height
那父节点不管是flex: 1,还是height：100%,都能够适应
问题
我们需要解决上面两个问题
要解决的就是表头固定
高度如何设置，才能使我们适应各种用户
表头固定
这里表头固定还是使用Element UI官方提供的方案——设置height
复制代码export default {
data() {
const item = {
date: “2016-05-02”,
name: “王小虎”,
address: “上海市普陀区金沙江路 1518 弄”
};
return {
// 模拟数据
tableData: Array(100).fill(item),
// 随便定义一个初始高度防止报错
height: “200px”
};
}
}
复制代码
如上设置height设置好了table表头固定
高度如何设置
上面设置好了表头固定, 继续我们要动态设置height为父节点的height
并且给el-table设置 id
这里需要注意的是 我们在设置为父节点的height的过程中假设父节点有padding值我们需要减掉
export default {
methods: {
// 这个方法用来动态设置 height
getAutoHeight() {
let el = document.querySelector(“#tableData”),
elParent = el.parentNode,
pt = this.getStyle(elParent, “paddingTop”),
pb = this.getStyle(elParent, “paddingBottom”);
// 一定要使用 nextTick 来改变height 不然不会起作用
this.$nextTick(() => {
this.height = elParent.clientHeight – (pt pb) “px”;
});
},
// 获取样式 我们需要减掉 padding-top， padding-bottom的值
getStyle(obj, attr) {
// 兼容IE浏览器
let result = obj.currentStyle
? obj.currentStyle[attr].replace(“px”, “”)
: document.defaultView
.getComputedStyle(obj, null)[attr].replace(“px”, “”);
return Number(result);
}
}
}
复制代码
高度设置好了,我们需要在挂载结束后的钩子函数中调用 此方法
export default {
mounted() {
this.getAutoHeight();
}
}
复制代码
那基本已经离结束不远了 ， 继续看图
但是这里又产生了新的问题，那就是 如果窗口大小改变, 那原来的height就不适用于现在的height
来来来 继续看图 就会出现两个滚动条
解决这个问题的办法 需要做两个操作
在window.onresize中调用我们设置的 获取高度的方法
export default {
mounted() {
this.getAutoHeight();
const self = this;
window.onresize = function(){
self.getAutoHeight();
};
}
}
复制代码
并且将父级节点CSS设置为overflow: hidden
我这里使用的官网示例代码 我的如下
.el-main {
overflow: hidden !important;
}
复制代码
最终成果
我这里用控制台的高度 模拟窗口高度变化
完整代码如下
ASIDE
HRADER
name: “AutoHeightTable”,
data() {
const item = {
date: “2016-05-02”,
name: “王小虎”,
address: “上海市普陀区金沙江路 1518 弄”
};
return {
tableData: Array(100).fill(item),
height: “200px”
};
},
mounted() {
this.getAutoHeight();
const self = this;
window.onresize = function(){
self.getAutoHeight();
};
},
methods: {
getAutoHeight() {
let el = document.querySelector(“#tableData”),
elParent = el.parentNode,
pt = this.getStyle(elParent, “paddingTop”),
pb = this.getStyle(elParent, “paddingBottom”);
this.$nextTick(() => {
this.height = elParent.clientHeight – (pt pb) “px”;
});
},
getStyle(obj, attr) {
// 兼容IE浏览器
let result = obj.currentStyle
? obj.currentStyle[attr].replace(“px”, “”)
: document.defaultView
.getComputedStyle(obj, null)[attr].replace(“px”, “”);
return Number(result);
}
}
};
height: 100%;
width: 100%;
overflow: hidden;
}
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
.el-main {
overflow: hidden !important;
}
复制代码
上面代码只是一种思路
更多的解决方案
还是得从业务出发进行封装
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/196437.html原文链接：https://javaforall.cn
