el-table-fixed-test v1.0.0

el-table-fixed

使ElementUI的el-table表头自动吸顶，支持左右固定列

注意

本方案使用了sticky样式实现，所以要保证祖先元素不能设置overflow:hidden这类的样式，否则不生效

演示

https://www.bilibili.com/video/BV1xx4y1W7Ck/?spm_id_from=333.999.0.0

使用

1. 下载

npm i el-table-fixed

2. 使用指令

import tableSticky from 'el-table-fixed'
//全局
Vue.directive('tableSticky', tableSticky)
//局部
<script>
export default {
  directives: {
    tableSticky
  }
}
</script>

3. 使用

<el-table v-tableSticky></el-table>

• 什么都不传默认吸顶高度为0
• 传递dom选择器，则获取dom距顶部的高度
• 修饰符：fixed

fixed修饰符表示当前表格有固定列需要使用表格监听，没有的话就可以使用普通的表头吸顶，减少性能消耗

• 修饰符：dom

dom修饰符表示如果传入的是选择器可以根据实际情况使用，如果获取的dom高度会变化，导致表头吸顶位置不对，可以使用这个修饰符

赞赏

若该项目对您有帮助且能节省您的开发时间，打赏50及以上即可联系作者索要源码，当前社会知识付费，一杯奶茶钱你好我也好！