el-table 实现表头置顶【干货满满】附源码

2024-06-10 19:04

本文主要是介绍el-table 实现表头置顶【干货满满】附源码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

a)一般情况下,想要在 ElTable 上实现表头固定,滑动滚动条时希望表头常显,不被滚动条顶上去。这时候就需要给表格添加高度,但是这个高度需要提前确定好,不是很方便,表格上边一段距离不是固定的,常常需要动态去使用 css 的 calc 函数进行减法扣除。
b)百度一下,看了一下别人常用的做法是 position:sticky 粘性定位。我这里就想到封装了 mixins 作为插件来实现,当时目的也是达到了,后面测试出来发现种种原因导致事件绑定冲突就放弃这种写法。
c)最后直接想起来el-*-plus的固钉组件,(这里不用plus版本的组件,不便于移植)由于版本项目问题,我这里是抽离出来以vue2的方式实现。我这里选择的是vant-ui@2.x 的 sticky组件源码 粘过来修修改改也能用。
d)最后又去修改了el-table 的 表头部分(下面会显示修改内容),使用 sticky 组件二次包装了一下即完成预期效果。

在这里插入图片描述

e)接下来就是修改 table 的组件代码内容(结尾附 github 地址)

创建新文件和 table 同级让其继承table(./el-table/index.vue

<template>...// 将原先 TableHeader 使用 affix 包装一下<affix :container="$el" :disabled="disabledAffix"><divv-if="showHeader"v-mousewheel="handleHeaderFooterMousewheel"class="el-table__header-wrapper"ref="headerWrapper"><TableHeaderref="tableHeader":store="store":border="border":default-sort="defaultSort":style="{width: layout.bodyWidth ? layout.bodyWidth + 'px' : '',}"></TableHeader></div></affix>...
</template><script>
import Table from "./table.vue";
import affix from "./affix.vue";export default {name: "ElTable",extends: Table,components: { affix },props: {data: { type: Array, default: () => [] },size: String,width: { type: [String, Number], default: "100%" },height: [String, Number],maxHeight: [String, Number],fit: { type: Boolean, default: true },stripe: { type: Boolean, default: true }, // 修改默认值border: Boolean,rowKey: [String, Function],context: {},showHeader: { type: Boolean, default: true },showSummary: Boolean,sumText: String,summaryMethod: Function,rowClassName: [String, Function],rowStyle: [Object, Function],cellClassName: [String, Function],cellStyle: [Object, Function],headerRowClassName: [String, Function],headerRowStyle: [Object, Function],headerCellClassName: [String, Function],headerCellStyle: [Object, Function],highlightCurrentRow: { type: Boolean, default: true }, // 修改默认值currentRowKey: [String, Number],emptyText: String,expandRowKeys: Array,defaultExpandAll: Boolean,defaultSort: Object,tooltipEffect: String,spanMethod: Function,selectOnIndeterminate: { type: Boolean, default: true },indent: { type: Number, default: 16 },treeProps: {type: Object,default: () => ({ hasChildren: "hasChildren", children: "children" }),},lazy: Boolean,load: Function,// 新增 一个 disabledAffix 状态disabledAffix: Boolean,},
};
</script>
table-header (./el-table/table-header.jsx)

文件中主要改动是 table 引用,被 affix 包装过之后,$parent 指向已经被改变。因此需要向上查找到父级 table。并将所有的 == this.¥parent.xxx== 修改为 this.table

export default {name: "ElTableHeader",methods: {...,handleHeaderClick(event, column) {if (!column.filters && column.sortable) {this.handleSortClick(event, column)} else if (column.filterable && !column.sortable) {this.handleFilterClick(event, column)}// this.$parent 需要替换为 this.tablethis.table.$emit('header-click', column, event)},handleHeaderContextMenu(event, column) {// this.$parent 需要替换为 this.tablethis.table.$emit('header-contextmenu', column, event)},...},computed: {// // table 被重写table() {let parent = this.$parent;while (parent && !parent.tableId) {parent = parent.$parent;}return parent;},},
};
使用方式(新增属性 disabled-affix )
参数说明类型默认值
disabled-affix是否启用 affixbooleantrue
<el-table :data="table.data" v-loading="table.loading" border stripe :disabled-affix="true" :header-cell-style="{ backgroundColor: '#efefef' }":hidden-columns="table.hiddenColumns" @header-cell-dragend="headerCellDragend" @header-dragend="headerDragend"@table-ready="tableReady"><el-table-column align="center" type="index" label="#" /><el-table-column align="center" prop="name" label="Name" /><el-table-column align="center" prop="address" label="Address" /><el-table-column align="center" prop="tags" label="Tags"><template slot-scope="{ row, column: col }"><el-tag v-for="tag in row.tags" :key="tag" :type="tag.length > 5 ? 'success' : 'info'">{{ tag }}</el-tag></template></el-table-column><el-table-column align="center" prop="date" label="Date" /><el-table-column align="center" label="Contorl"><template slot-scope="{ row, column: col }"><el-button type="text" size="mini">删除</el-button></template></el-table-column>
</el-table>

github example 地址 内容包括之前拖拽,列显示操作

这篇关于el-table 实现表头置顶【干货满满】附源码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1049006

相关文章

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注,收藏不迷路💖 Kubernetes的PodSecurityPolicy(PSP)是一个关键的安全特性,它在Pod创建之前实施安全策略,确保P

Java ArrayList扩容机制 (源码解读)

结论:初始长度为10,若所需长度小于1.5倍原长度,则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义         1:数组默认长度         2:这是一个共享的空数组实例,用于明确创建长度为0时的ArrayList ,比如通过 new ArrayList<>(0),ArrayList 内部的数组 elementData 会指向这个 EMPTY_EL

如何在Visual Studio中调试.NET源码

今天偶然在看别人代码时,发现在他的代码里使用了Any判断List<T>是否为空。 我一般的做法是先判断是否为null,再判断Count。 看了一下Count的源码如下: 1 [__DynamicallyInvokable]2 public int Count3 {4 [__DynamicallyInvokable]5 get