滚动el-table表格，粘性定位表头在可视区顶部

需求：

        在弹窗全局el-dialog内，有上方筛选框，标题和表格列表，内容超出高度时加入滚动效果，往下滚动的时候需要把标题和表格固定在顶部

 例子：

        需求文档整个页面是个弹窗，表格内容多的时候，有滚动条效果，是整个页面的滚动，往下方滚动的时候，表格视图滚动顶部时，表格视图和表格表头固定在顶部，表格内容进行滑动

效果图：

        

实现代码：

    html代码：

<div class="transport-list">表格视图</div>
<el-table
     :data="tableData"
     style="width: 100%"
     :header-cell-style="{
         fontSize: '14px',
         backgroundColor: '#f8f8f8',
         color: '#333',
     }"
      class="fileTable"
>
<el-table
  :data="tableData"
  style="width: 100%"
  :header-cell-style="{
    fontSize: '14px',
    backgroundColor: '#f8f8f8',
    color: '#333',
  }"
  class="fileTable"
>
  <el-table-column
    v-for="(column, index) in columns"
    :key="index"
    :prop="column.prop"
    :label="column.label"
  >
    <template slot-scope="scope">
      <div
        v-if="column.label === '姓名'"
        @click="editRow(scope.row, 'age')"
      >
        <div v-if="isEditing(scope.row, 'age')">
          <el-input
            v-model="scope.row[column.prop]"
            @blur="saveEdit(scope.row, 'age')"
          />
        </div>
        <div v-else>{{ scope.row[column.prop] }}</div>
      </div>
      <span v-else-if="column.label === '操作'">
        <el-button type="text" size="small">删除</el-button>
      </span>
      <span v-else>
        {{ scope.row[column.prop] }}
      </span>
    </template>
  </el-table-column>
</el-table>

     css实现代码：

     

.transport-list {
  position: sticky;
  top: 0px;
  z-index: 20;
  background: #fff;
}


.fileTable {
  overflow: unset;
  ::v-deep .el-table__header-wrapper {
    position: sticky;
    top: 30px;
    z-index: 1000;
  }
}