奇思妙想之Element-plus Table组件底部滚动条吸底

通过剪切原elemennt-plus的滚动条 移动到table里面进行sticky吸底 js插件

/**
 * v-scrollbar
 * 放在el-table 标签上 使其底部滚动条吸底,需要区分是否有翻页
 * 接收参数：Boolean
 * v-scrollbar="{fixedHorizontalScrollbar: true, hasPagination: true}"
 * 需设置scrollbar-always-on :总是显示滚动条
 */
import type { Directive, DirectiveBinding } from 'vue';

const directive: Directive = {
	mounted(el: HTMLElement, binding: DirectiveBinding) {
		console.log('el', el, binding);
		if (binding.value.fixedHorizontalScrollbar) {
			const bar = el?.querySelector('.el-scrollbar__bar');
			if (bar && el) {
				bar?.classList?.add('v-scroll__el-scrollbar__bar');
				if (binding.value.hasPagination === false) {
					bar?.classList?.add('el-scrollbar__no_paginationbar');
				}
				el?.appendChild(bar);
			}
		}
	},
};

export default directive;

css

.v-scroll__el-scrollbar__bar.el-scrollbar__bar{
  z-index: 11;
  overflow-x: hidden;
  position: sticky;
  bottom: 40px;
  background-color: white;
}

使用:

  directives: {
    scrollbar
  },
v-scrollbar="{fixedHorizontalScrollbar:true, hasPagination:true}"