摘要：
你应该熟悉mixin。它可以在全局或配置中向mixin的组件添加公共属性和方法。这里有一个具体的用途。当使用元素ui时，当表太长而无法滚动时，头部会滚出视图，不可能知道下面内容的每一列代表什么。这里的实现方案是stick，即展开视图并将列表的头部固定在顶部。
大家对mixin应该熟悉，它能全局或者配置mixin的组件添加公共属性与方法。这里展示一次具体的使用。
在使用element-ui时（别的场景一样出现），table过长时滚动时，头部滚出视图了，就无法知道下面内容每一列代表啥。这里的实现方案采用sticky即可，即滚出视图让列表的头部固定在顶部。
这里采用mixin来实现，需要的页面配置mixin即可，代码如下
// 引入计算偏移的方法和节流方法 import OffsetManage from '@flyme/utils/lib/domUtils/OffsetManage' import throttle from '@flyme/utils/lib/helper/throttle' const tableHeaderFixMixin = { mounted() { // SPA页面使用了vue-router this.routerViewEl = document.querySelector('.main-router-view') if (this.routerViewEl) { // 节流 this.scrollFn = throttle(() => { // 滚出添加fixed样式，否则去除 if (this.tableHeader) { const top = parseInt(this.tableHeader.dataset.top) if (this.routerViewEl.scrollTop > top) { this.tableHeader.classList.add('fixed-table-header') this.tableHeader.style.width = this.tableHeader.parentNode.offsetWidth + 'px' } else { this.tableHeader.classList.remove('fixed-table-header') this.tableHeader.style.width = '100%' } } }, 90) this.routerViewEl.addEventListener('scroll', this.scrollFn) this.$nextTick(() => { this.initStickyTableHeader() }) } }, beforeDestroy() { // 记得销毁 this.routerViewEl.removeEventListener('scroll', this.scrollFn) }, methods: { // 初始化datatable的header的sticky initStickyTableHeader() { this.tableHeader = document.querySelector('.el-table__header-wrapper') if (this.tableHeader) { this.tableHeader.dataset.top = OffsetManage.top(this.tableHeader) } }, }, } export { tableHeaderFixMixin
具体使用
import { tableHeaderFixMixin } from '../mixins'
export default {
...
mixins: [tableHeaderFixMixin],
...转载于:https://juejin.im/post/5b97a43bf265da0ac9628639