美文网首页
element table 表头固定,表格高度自适应

element table 表头固定,表格高度自适应

作者: 前端陈陈陈 | 来源:发表于2020-08-26 15:11 被阅读0次
    //通过 :height="tableHeight" 设置
    <el-table>
      :height="tableHeight"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            class="tab_info"
            style="width: 100%"
            default-expand-all
            row-key="id"
            :row-class-name="tableRowClassName"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            @selection-change="handleSelectionChange"
            v-loading="loading"
    </el-table>
    export default {
      data() {
          return {
    tableHeight:500 , // 自己设置高度
                }
          },
      mounted() {
        //固定表头
        this.$nextTick(function() {
          this.tableHeight =
            window.innerHeight - this.$refs.table.$el.offsetTop - 50;
    
          // 监听窗口大小变化
          let self = this;
          window.onresize = function() {
            self.tableHeight =
              window.innerHeight - self.$refs.table.$el.offsetTop - 50;
          };
        });
      },
    }
    

    相关文章

      网友评论

          本文标题:element table 表头固定,表格高度自适应

          本文链接:https://www.haomeiwen.com/subject/ogzxsktx.html