element-table封装/表头页面置顶停留

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

1.表格组件封装

<el-table
    ref="multipleTable"
    :height="settings.height"
    v-loading="settings.isLoading"
    :border="settings.isBorder"
    @selection-change="e => handleClick('select', e)"
    highlight-current-row
    @current-change="handleCurrentChange"
    @cell-click="handleCellclick"
    @select="handleSelect"
    @select-all="handleSelectall"
    :data="data.rows?data.rows:data.list "
    style="width: 100%"
    :header-cell-style="{'background-color': '#FAFAFA'}"
>
    <el-table-column v-if="settings.isSelection" min-width="4.3%" type="selection" ></el-table-column>
    <el-table-column v-if="settings.isIndex" type="index" :index="1" label="序号" min-width="4.3%"></el-table-column>
    <template v-for="item in header">
      <template v-if="item.prop !== 'action' && item.column!=true">
       <el-table-column
        :key="item.prop"
        :type="item.type"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :min-width="item.minwidth"
        :fixed="item.fixed"
        ></el-table-column>
     </template>
      <template v-if="item.column==true">
        <slot :name="item.prop"></slot>
      </template>
    </template>
    <slot name="action"></slot>
 </el-table>
//翻页组件
<el-pagination
    :key="settings.curPage"
    v-if="settings.isPagination"
    background
    style="text-align:right;padding:6px 0"
    @size-change="e => handleClick('pageSize', e)"
    @current-change="e => handleClick('currentPage', e)"
    :current-page="currentPage"
    :page-sizes="[20, 50, 100, 200]"
    :page-size="20"
    layout="total, sizes, prev, pager, next, jumper"
    :total="settings.total"
></el-pagination>

2.页面滚动事件的监听

将页面的滚动事件配置在组件settings中，需要浮动表头的可自己定义，这样增加了组件的灵活性，需要的组件可以配置this.settings.handlerFixed=true，不需要的可以不配置或者this.settings.handlerFixed=false，在组件加载的时候会判断是否添加监听事件

mounted() {
if(this.settings.handlerFixed){
    window.addEventListener('scroll',this.onscroll,true)
}
},

3.浮动表头

浮动表头，主要用到的技术是修改整个表头元素的定位属性样式，这个一般只能根据固定页面表格的固定高度设置，如果想要封装随机高度，可能还需要再次封装代码，我这个只是一个固定高度的简版，如果有大佬有封装随机高度的浮动表头，可以分享一下，大家一起学习进步

还有一个在设置浮动表头的时候需要将他的父元素相对定位（子绝父相）

methods: {
  onscroll(e){
    let page=document.getElementsByClassName('custom-ant-tab-content')
    let table=document.getElementsByClassName('el-table__header-wrapper')
    page[0].style="position: relative;"
    if(e.srcElement.scrollTop>=170){
    table[0].classList.add("fixed");
    }else{
    table[0].classList.remove("fixed");
   }
  },
}

4.浮动表头样式

浮动表头的原理也就是将表头元素fixed在页面的顶部的固定位置，如果页面上还有其他浮动元素，需要修改相应的页面元素层级，这个类样式可以作为监听和浮动表头的一个节点，监听到某个位置了，添加类，否则取消，表头恢复原本的样式和位置

.fixed{
    position:fixed;
    top:105px;
    z-index: 999;
    }