Element UI 表格固定表头实现 - 滚动时表头不跟随

<template>
  <div class='brand-honest fixed-header'>
    <el-table :data='tableData' border style='width: 100%'>
      <el-table-column prop='date' label='日期' width='180'> </el-table-column>
      <el-table-column prop='name' label='姓名' width='180'> </el-table-column>
      <el-table-column prop='address' label='地址'> </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ]
      }
    },
    methods: {}
  }
</script>
<style lang='scss' scoped>
  .brand-honest {
    width: 100%;
    height: 400px; // 设置表格外层容器的高度，可以根据实际情况调整
    overflow-y: auto;
  }

  .fixed-header thead {
    position: sticky;
    top: 0;
    background-color: white;
  }

  .fixed-header tbody {
    display: block;
    max-height: inherit; // 继承外层容器的高度
    overflow-y: auto;
  }
</style>
<p>可以使用CSS的position属性来实现固定表头不跟随滚动。具体实现步骤如下：</p>
<ol>
<li>
<p>在表格外层容器div上添加一个class名为fixed-header，用于设置固定表头的样式。</p>
</li>
<li>
<p>使用CSS选择器选择到表格的表头（thead）元素，并设置其position属性为sticky，top属性为0，background-color属性为白色（可根据需要修改颜色）。</p>
</li>
<li>
<p>给表格外层容器div添加一个高度，使其可以产生滚动条。可以通过固定高度、设置max-height或者设置height: 100%等方式。</p>
</li>
<li>
<p>通过设置表格的tbody元素的display属性为block，将其转为块级元素，使表格内容可以滚动。</p>
</li>
<li>
<p>设置表格的tbody元素的高度，使其可以根据表格外层容器div的高度自动调整高度。</p>
</li>
</ol>
<p>修改后的代码如下所示：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div class='brand-honest fixed-header'&gt;
    &lt;el-table :data='tableData' border style='width: 100%'&gt;
      &lt;el-table-column prop='date' label='日期' width='180'&gt; &lt;/el-table-column&gt;
      &lt;el-table-column prop='name' label='姓名' width='180'&gt; &lt;/el-table-column&gt;
      &lt;el-table-column prop='address' label='地址'&gt; &lt;/el-table-column&gt;
    &lt;/el-table&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style lang='scss' scoped&gt;
  .brand-honest {
    width: 100%;
    height: 400px; // 设置表格外层容器的高度，可以根据实际情况调整
    overflow-y: auto;
  }

  .fixed-header thead {
    position: sticky;
    top: 0;
    background-color: white;
  }

  .fixed-header tbody {
    display: block;
    max-height: inherit; // 继承外层容器的高度
    overflow-y: auto;
  }
&lt;/style&gt;
</code></pre>
<p>这样就实现了表头固定，滚动时表头不跟随的效果。</p>