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

闲人下凡

前提：table内容过高时页面滚动到下方后，表头看不见无法明确各列的含义
1. 官网给出两种种属性来固定表头 height 以及 max-height；但是有个问题就是 height高度会被定死，max-height无法适应不同分辨率的情况

1. <el-table ref="multipleTable" :data="listData" height="200" class="img-tab">
   
2.       <el-table-column label="序号" prop="pagingCustomOrder" align="center" width="80" />
   
3.       <el-table-column align="center" label="报警时间" prop="warningTime" />
   
4.       <el-table-column align="center" label="企业名称" prop="companyName" />
   
5. </el-table>

复制代码

1. <el-table ref="multipleTable" :data="listData" max-height="200" class="img-tab">
   
2.       <el-table-column label="序号" prop="pagingCustomOrder" align="center" width="80" />
   
3.       <el-table-column align="center" label="报警时间" prop="warningTime" />
   
4.       <el-table-column align="center" label="企业名称" prop="companyName" />
   
5. </el-table>

复制代码

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

1. <el-table ref="multipleTable" :data="listData" class="scroll-tab">
   
2.       <el-table-column label="序号" prop="pagingCustomOrder" align="center" width="80" />
   
3.       <el-table-column align="center" label="报警时间" prop="warningTime" />
   
4.       <el-table-column align="center" label="企业名称" prop="companyName" />
   
5. </el-table>

复制代码

1. // table表头固定
   
2. .el-table.scroll-tab  {
   
3.   overflow: auto;
   
4.   max-height: calc(100% - 200px);
   
5. }
   
6. .scroll-tab .el-table__header-wrapper  {
   
7.   position: sticky;
   
8.   top: 0;//这个值根据实际情况而定
   
9.   z-index: 10;
   
10. }

复制代码

3. 若是表格宽度也超出内容，需要横向滚动+竖向滚动

1. // table表头固定
   
2. .el-table.scroll-tab  {
   
3.   overflow: hidden;
   
4.   height: calc(100% - 200px);
   
5. }
   
6. 
   
7. .scroll-tab .el-table__header-wrapper  {
   
8.   position: sticky;
   
9.   top: 0;//这个值根据实际情况而定
   
10.   z-index: 10;
    
11. }
    
12. 
    
13. .scroll-tab .el-table__body-wrapper {
    
14.   height: calc(100% - 60px);
    
15.   overflow: auto;
    
16. }

复制代码

附：el-table固定表头（设置height）出现内容过多时不能滚动问题
主要原因是el-table没有div包裹

解决：加一个div并设置其高度和overflow

我自己的主要代码

1.     <div class="contentTable">
   
2.       <el-table
   
3.         ref="table"
   
4.         :data="tableData"
   
5.         stripe
   
6.         @row-dblclick="onRowDblclick"
   
7.         height="100%"
   
8.       >
   
9.         <el-table-column
   
10.           type="index"
    
11.           align="center"
    
12.           label="序号"
    
13.           width="50"
    
14.         ></el-table-column>
    
15.         <el-table-column
    
16.           prop="templateName"
    
17.           align="center"
    
18.           label="模板名称"
    
19.           width="150"
    
20.         ></el-table-column>
    
21.         <el-table-column
    
22.           prop="mainContent"
    
23.           align="center"
    
24.           label="主要内容"
    
25.         ></el-table-column>
    
26.         <el-table-column
    
27.           prop="devContent"
    
28.           align="center"
    
29.           label="活动措施和设备状态"
    
30.         ></el-table-column>
    
31.         <el-table-column prop="operate" align="center" label="操作" width="80">
    
32.           <template slot-scope="scope">
    
33.             <el-button
    
34.               size="mini"
    
35.               class="delete-btn"
    
36.               @click="onDelete(scope.row)"
    
37.               title="删除"
    
38.               v-isLogin
    
39.             ></el-button>
    
40.           </template>
    
41.         </el-table-column>
    
42.       </el-table>
    
43.     </div>

复制代码

css代码：

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

复制代码

-webkit-scrollbar用来加滚动条的！！！
页面所有代码：

1. <template>  <el-dialog    :title="title"    :visible.sync="visible"    class="template-query"    @opened="openInit"    append-to-body    width="80%"  >    <el-form      :model="form"      ref="form"      :inline="true"      style="text-align: right"      size="small"    >      <el-form-item label="模板名称：" prop="templateName">        <el-input          v-model="form.templateName"          maxlength="20"          v-special-code        ></el-input>      </el-form-item>      <el-form-item>        <el-button type="primary" @click="onQuery">查询</el-button>        <el-button type="primary" @click="onReset">重置</el-button>      </el-form-item>    </el-form>    <div class="contentTable">
   
2.       <el-table
   
3.         ref="table"
   
4.         :data="tableData"
   
5.         stripe
   
6.         @row-dblclick="onRowDblclick"
   
7.         height="100%"
   
8.       >
   
9.         <el-table-column
   
10.           type="index"
    
11.           align="center"
    
12.           label="序号"
    
13.           width="50"
    
14.         ></el-table-column>
    
15.         <el-table-column
    
16.           prop="templateName"
    
17.           align="center"
    
18.           label="模板名称"
    
19.           width="150"
    
20.         ></el-table-column>
    
21.         <el-table-column
    
22.           prop="mainContent"
    
23.           align="center"
    
24.           label="主要内容"
    
25.         ></el-table-column>
    
26.         <el-table-column
    
27.           prop="devContent"
    
28.           align="center"
    
29.           label="活动措施和设备状态"
    
30.         ></el-table-column>
    
31.         <el-table-column prop="operate" align="center" label="操作" width="80">
    
32.           <template slot-scope="scope">
    
33.             <el-button
    
34.               size="mini"
    
35.               class="delete-btn"
    
36.               @click="onDelete(scope.row)"
    
37.               title="删除"
    
38.               v-isLogin
    
39.             ></el-button>
    
40.           </template>
    
41.         </el-table-column>
    
42.       </el-table>
    
43.     </div>  </el-dialog></template><script>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.length; i++) {      //     if ("codeType" in headFieldList[i]) {      //       await getBizcodeList(headFieldList[i].codeType).then((res) => {      //         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;      }    },  },};</script><style scoped>.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 {
    
44.   height: calc(100% - 50px) !important;
    
45.   overflow: scroll;
    
46. }
    
47. .contentTable >>> .el-table__body-wrapper::-webkit-scrollbar {
    
48.   width: 10px;
    
49.   height: 8px;
    
50. }</style>

复制代码

总结
到此这篇关于element-ui el-table表格固定表头的文章就介绍到这了,更多相关element-ui el-table固定表头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/320912932.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！