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

news2024/11/8 21:57:15
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">
    <div
      v-if="showHeader"
      v-mousewheel="handleHeaderFooterMousewheel"
      class="el-table__header-wrapper"
      ref="headerWrapper"
    >
      <TableHeader
        ref="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.table
      this.table.$emit('header-click', column, event)
    },

    handleHeaderContextMenu(event, column) {
      // this.$parent 需要替换为 this.table
      this.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 地址 内容包括之前拖拽,列显示操作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1809004.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

codeforce round951 div2

A guess the maximum 问题&#xff1a; 翻译一下就是求所有相邻元素中max - 1的最小值 代码&#xff1a; #include <iostream> #include <algorithm>using namespace std;const int N 5e4;int a[N]; int n;void solve() {cin >> n;int ans 0x3f3f3f3f;…

一个简单好用的 C# Easing Animation 缓动动画类库

文章目录 1.类库说明2.使用步骤2.1 创建一个Windows Form 项目2.2 安装类库2.3 编码2.4 效果 3. 扩展方法3.1 MoveTo 动画3.2 使用回调函数的Color动画3.3 属性动画3.4 自定义缓动函数 4.该库支持的内置缓动函数5.代码下载 1.类库说明 App.Animations 类库是一个很精炼、好用的…

RT-DETR 详解之查询去噪( DeNoise)

引言 前面我们已经讲解了RT-DETR的基本结构与Efficient Hybrid Encoder部分&#xff0c;在这篇博客里&#xff0c;博主将主要记录RT-DETR的第二个创新点&#xff1a;Uncertainty-minimal Query Selection 查询向量选择为什么重要&#xff1f; 关于 Query Selection&#xff0…

使用WGCLOUD监测进程的cpu和内存使用情况

WGCLOUD是一款国产免费的运维平台&#xff0c;可以监测很多指标数据&#xff0c;我们在这篇文章主要描述如何使用WGCLOUD监测进程 其实官网的进程使用描述也比较清楚&#xff0c;看看 进程应用、中间件监测使用说明&#xff08;对我们关注的业务系统、中间件、进程进行实时监测…

计网总结☞网络层

.................................................. 思维导图 ........................................................... 【Wan口和Lan口】 WAN口&#xff08;Wide Area Network port&#xff09;&#xff1a; 1)用于连接外部网络&#xff0c;如互联…

[chisel]马上要火的硬件语言,快来了解一下优缺点

Chisel是什么&#xff1f; Chisel的全称为Constructing Hardware In a Scala Embedded Language&#xff0c;是一个基于Scala的DSL&#xff08;Domain Specific Language&#xff0c;特定领域专用语言&#xff09;。2012年&#xff0c;加州大学伯克利分校&#xff08;UC Berkel…

大话设计模式解读02-策略模式

本篇文章&#xff0c;来解读《大话设计模式》的第2章——策略模式。并通过Qt和C代码实现实例代码的功能。 1 策略模式 策略模式作为一种软件设计模式&#xff0c;指对象有某个行为&#xff0c;但是在不同的场景中&#xff0c;该行为有不同的实现算法。 策略模式的特点&#…

Mysql的底层实现逻辑

Mysql5.x和Mysql8性能的差异 整体性能有所提高&#xff0c; 在非高并发场景下&#xff0c;他们2这使用区别不大&#xff0c;性能没有明显的区别。 只有高并发时&#xff0c;mysql8才体现他的优势。 2. Mysql数据存储结构Innodb逻辑结构 数据选用B树结构存储数据&#xff0…

IDEA去除代码和XML中的波浪线(黄色警告线)

通常情况下&#xff0c;IDE自带的侦测功能会帮我们提示一些错误、警告等。但这对于强迫症患者来说并不友好。以下是去除IDE代码和XML文件中的波浪线&#xff08;黄色警告线&#xff09;、拯救强迫症患者的有效方案 1、去除XML中的波浪线 2、去除代码中的波浪线 关爱强迫症患者…

QT 信号和槽 通过自定义信号和槽沟通 如何自定义槽和信号的业务,让它们自动关联 自定义信号功能

通过信号和槽机制通信&#xff0c;通信的源头和接收端之间是松耦合的&#xff1a; 源头只需要顾自己发信号就行&#xff0c;不用管谁会接收信号&#xff1b;接收端只需要关联自己感兴趣的信号&#xff0c;其他的信号都不管&#xff1b;只要源头发了信号&#xff0c;关联该信号…

C语言学习系列:GCC编译器Windows版本MinGW-w64的安装教程

本文图文分享如何安装C语言编译器——MinGW-w64。 只要看到这篇文章&#xff0c;就可以按照文中步骤正确安装MinGW-w64并使用。 一、什么是 MinGW-w64 &#xff1f; 我们知道C语言是高级语言&#xff0c;必须编译为二进制文件&#xff0c;才能为计算机运行&#xff0c;MinGW…

每日两题7

文章目录 买卖股票的最佳时机含冷冻期买卖股票的最佳时机含手续费 买卖股票的最佳时机含冷冻期 分析&#xff1a; class Solution { public:int maxProfit(vector<int>& prices) {int n prices.size();vector<vector<int>> dp(n, vector<int>(3…

path[1][0] path[1][1:-1] [path[1][-1] 分别怎么取的

假设的输入数据 假设 path 变量如下&#xff1a; path [path, [10515194, _derivationally_related_form, 00265386, _derivationally_related_form, 00800940, _hypernym, 00798245, _derivationally_related_form, 02589576]]示例代码 为了更清楚地展示这些操作&#xff…

OSFP 1类LSA详解

概述 上图为1类LSA的实际报文结构 , 在开始之前一定需要说明 , 1类LSA是OSPF中最复杂的LSA类型 , 在LSA头部的文章中详细介绍了 LS Type / Link State ID / Adv Router 3种头部字段 , 在1类LSA的主体内容中还存在类似的字段十分的相似 , 很多网络从业者难以理解的点就在于此 , …

2- 简易版-日记写作软件(java)-涉及的技术点简述

环境&#xff1a; Ubuntu LinuxJDK1.8Eclipse 项目文件结构&#xff1a; 0. 涉及的技术点 1)view 包&#xff08;GUI&#xff09;&#xff1a; Eclipse SwingEclipse WindowBuilderJFileChooser(用于弹出文件选择对话框&#xff0c;进行文件或目录的选择)FileNameExtension…

文案策划背后的秘密 | 职场高手养成记

要想在文案策划这个行当里混&#xff0c;首先得对自己的文字功底有足够的信心&#xff0c;那种“文章独步天下”的气势不可或缺。 要是没有这份自信&#xff0c;我建议你还是另寻他路。 要想跨入文案策划的大门&#xff0c;可以从以下几个方面入手&#xff1a; 1. 学习文案基…

探索OrangePi AIpro:单板计算机的深度体验之旅

准备阶段&#xff1a;环境与资料 在开始我们的探索之旅前&#xff0c;确保您已准备好以下装备&#xff1a; OrangePi AIpro&#xff1a;我们的主角&#xff0c;一台功能强大的单板计算机。Windows 10笔记本电脑&#xff1a;作为我们的辅助工具&#xff0c;用于管理和测试。路…

NOS II - Timer定时器

NOS II-Time定时器 简单回忆NIOS II中定时器的使用。 一、定时器的框图 二、定时器寄存器的描述 定时器的寄存器都是16bit的&#xff0c; 偏移量寄存器名称R/W15bit…4bit3bit2bit1bit0bit0Status - 状态寄存器R/W - 可读可写*****runTO1Control - 控制寄存器R/W***stopsta…

VSFT匿名用户访问-设置

1、先备份配置档 cp -av /etc/vsftpd/vsftpd.conf{,_bak} 2、编辑配置档&#xff0c;修改以下参数 vim /etc/vsftpd/ vsftpd.conf anonymous_enableYES -----允许匿名用户访问 anon_upload_enableYES -----允许匿名用户上传 anon_mkdir_write_enableYES …

汇编语言作业(五)

目录 一、实验目的 二、实验内容 三、实验步骤以及结果 四、实验结果与分析 五、 实验总结 一、实验目的 1.熟悉掌握汇编语言的程序结构&#xff0c;能正确书写数据段、代码段等 2&#xff0c;利用debug功能&#xff0c;查看寄存器&#xff08;CS,IP,AX,DS..)及数据段的…