前提：table内容过高时页面滚动到下方后，表头看不见无法明确各列的含义
1. 官网给出两种种属性来固定表头 height 以及 max-height；但是有个问题就是 height高度会被定死，max-height无法适应不同分辨率的情况
2. 可以进行样式控制表格高度，达到固定表头的需求，就可以避免高度定死的情况
// table表头固定
.el-table.scroll-tab {
overflow: auto;
max-height: calc(100% - 200px);
}
.scroll-tab .el-table__header-wrapper {
position: sticky;
top: 0;//这个值根据实际情况而定
z-index: 10;
}
3. 若是表格宽度也超出内容，需要横向滚动+竖向滚动
// table表头固定
.el-table.scroll-tab {
overflow: hidden;
height: calc(100% - 200px);
}
.scroll-tab .el-table__header-wrapper {
position: sticky;
top: 0;//这个值根据实际情况而定
z-index: 10;
}
.scroll-tab .el-table__body-wrapper {
height: calc(100% - 60px);
overflow: auto;
}
附：el-table固定表头（设置height）出现内容过多时不能滚动问题
主要原因是el-table没有div包裹
解决：加一个div并设置其高度和overflow
我自己的主要代码
css代码：
.contentTable {
height: calc(100% - 50px) !important;
overflow: scroll;
}
.contentTable >>> .el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
height: 8px;
}
-webkit-scrollbar用来加滚动条的！！！
页面所有代码：
查询重置import { listTemplatesByType } from "@/api/template.js"; import { removeTemplate } from "@/api/template.js"; import { getBizcodeList } from "@/api/common.js"; export default { props: { templateQueryVisible: { type: Boolean, default: false, }, type: { type: String, default: "", }, typeName: { type: String, default: "", }, }, data() { return { title: "", form: { templateName: "", }, headField: [], //表头信息 tableData: [], //表格数据 }; }, computed: { visible: { get() { return this.templateQueryVisible; }, set(val) { this.$emit("update:templateQueryVisible", val); }, }, }, mounted() {}, methods: { //打开窗口初始化 openInit() { this.title = this.typeName + "模板管理"; this.form.templateName = ""; //根据type查询表头信息 // listGridHeadByType({ type: this.type }).then(async (res) => { // var headFieldList = JSON.parse(res.data.data); // for (var i = 0; i { // headFieldList[i]["codeList"] = res.data.data; // }); // } // } // this.headField = headFieldList; // }); //查询模板数据 this.onQuery(); }, //删除 onDelete(row) { var that = this; this.$confirm("确定删除该模板？", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }).then(() => { removeTemplate(row.id).then((res) => { if (res.data.code == "1") { that.$message({ type: "success", message: "删除模板成功！", }); that.onQuery(); } else { that.$message({ type: "error", message: "保存模板失败！", }); } }); }); }, //双击行加载模板数据 onRowDblclick(row) { if (row.id) { delete row.id; } if (row.ID) { delete row.ID; } this.$emit("loadTemplateData", row); }, //查询 onQuery() { //根据type查询模板数据 listTemplatesByType({ type: this.type, name: this.form.templateName, }).then((res) => { var resData = res.data.data; var tableData = []; console.log(resData); if (resData) { for (var i = 0; i < resData.length; i++) { var content = JSON.parse(resData[i].content); let res = { id: resData[i].id, templateName: resData[i].name, mainContent: content.mainContent, devContent: content.devContent, }; tableData.push(res); } this.tableData = tableData; } else { this.tableData = []; } }); }, //重置 onReset() { if (this.$refs.form) { this.$refs.form.resetFields(); this.onQuery(); } }, //渲染表格列 itemFormatter(cellValue, codeList) { if (codeList && cellValue) { // return this.$common.renderCodeId(cellValue, codeList); return this.$common.renderCode(cellValue, "ID", "TEXT", codeList); } else { return cellValue; } }, }, }; .template-query >>> .el-dialog__body { height: 600px; } .template-query >>> .el-form-item__label { width: 85px !important; } .delete-btn { background-image: url("~@/assets/imgs/delete.png"); width: 23px; height: 23px; padding-left: 5px; cursor: pointer; background-repeat: no-repeat; } .contentTable { height: calc(100% - 50px) !important; overflow: scroll; } .contentTable >>> .el-table__body-wrapper::-webkit-scrollbar { width: 10px; height: 8px; }
总结
到此这篇关于element-ui el-table表格固定表头的文章就介绍到这了,更多相关element-ui el-table固定表头内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
