IT俱乐部 JavaScript element-ui el-table表格固定表头代码示例

element-ui el-table表格固定表头代码示例

发布: 2024年 5月 26日 454阅读

前提：table内容过高时页面滚动到下方后，表头看不见无法明确各列的含义

1. 官网给出两种种属性来固定表头 height 以及 max-height；但是有个问题就是 height高度会被定死，max-height无法适应不同分辨率的情况

1
 
1
 

2. 可以进行样式控制表格高度，达到固定表头的需求，就可以避免高度定死的情况

1
 
1
2
3
4
5
6
7
8
9
10
// 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. 若是表格宽度也超出内容，需要横向滚动+竖向滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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

我自己的主要代码

1
2
3
    <div class="contentTable">
       
</div>

css代码：

1
2
3
4
5
6
7
8
.contentTable {
  height: calc(100% - 50px) !important;
  overflow: scroll;
}
.contentTable >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}

-webkit-scrollbar用来加滚动条的！！！

页面所有代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
查询重置<div class="contentTable">
       
</div>
   
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俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/11110.html
69赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部