关于element-ui表头吸附的问题

废话不多说，直接上思路
通过sticky实现element-ui表头吸顶，具体步骤如下

新建一个sticky容器
将element-ui的表头移动至这个容器中
处理左侧固定列
贴代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
   .first-title {
      height: 300px;
      background: #f00;
   }
</style>
<body>

   <div class="first-title">
      this is title
   </div>
   <div id="app">
      
      <el-table
            v-table-sticky="{ top: '0px', zIndex: 101}"
         :data="tableData"
         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>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
Vue.directive('table-sticky', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted (el, binding, vnode) {
    // 获取当前vueComponent的ID。作为存放各种监听事件的key
    const uid = binding.value.uid

    let panel = document.createElement("div");
    panel.className = 'el-table el-table--fit el-table--enable-row-transition el-table--small';
    panel.style=`position: sticky;top: ${binding.value.top}; z-index: ${binding.value.zIndex};`;
    console.log('uid_is',[el,uid])
    $(panel).insertBefore(el)
    let func = function () {
      let elFixed = $(el).children('.el-table__fixed');
      if ($(el).children('.el-table__header-wrapper')[0] !== undefined) {
        panel.append($(el).children('.el-table__header-wrapper')[0])
      }
      elFixed.children('.el-table__fixed-header-wrapper').width(elFixed.width()).css('overflow', 'hidden')
      elFixed.children('.el-table__fixed-body-wrapper').css('top',0)
      if (elFixed.children('.el-table__fixed-header-wrapper')[0] !== undefined) {
        panel.append(elFixed.children('.el-table__fixed-header-wrapper')[0])
      }

      if (binding.value.isFooter === true) {
        if ($(el).children('.el-table__footer-wrapper')[0] !== undefined) {
          panel.append($(el).children('.el-table__footer-wrapper')[0])
        }
        if (elFixed.children('.el-table__fixed-footer-wrapper')[0] !== undefined) {
          panel.append(elFixed.children('.el-table__fixed-footer-wrapper')[0])
        }
      }
    }
    for (let i = 100; i <= 1500; i=i+100) {
      setTimeout(function() {
        func()
      },i);
    }


    // 获取当前滚动的容器是什么。如果是document滚动。则可默认不传入parent参数
  },
  // component 更新后。重新计算表头宽度
  componentUpdated (el, binding, vnode) {
    let elFixed = $(el).children('.el-table__fixed');
    elFixed.children('.el-table__fixed-body-wrapper').css('top',0)
  },
  // 节点取消绑定时 移除各项监听事件。
  unbind (el, binding, vnode) {
  }
})
   var app= new Vue({
      el:"#app", //绑定的元素
      data:{
          tableData: []
      },
      created() {
         for (let i = 0; i < 1000; i++) {
         this.tableData.push({
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          })
         }
      }
   });

</script>
</html>

关于element-ui表头吸附的问题

leanxi

引用和评论

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了