自定义表格组件:实现表格中有固定列的功能逻辑

news2024/12/25 15:19:40

目录

    • 1,效果图
    • 2,实现思路
    • 3,实现方式

1,效果图

可以拖动纵向滑块,最左边一列固定住。
以同样的道理,可以在右面固定一列
在这里插入图片描述

2,实现思路

作为一个table组件,要接受父组件中的对table的数据定义以及对每一个列的数据定义。

因此要实现固定列,就要对父组件传来的每一列的数据进行筛选。
主要的步骤:
1, 用fixed来标记每一列的固定状态。
2,对父组件传来的每一列的数据进行筛选
3,将左固定列,右固定列,主列分别保存在数组里面。
4,将左固定列,右固定列,主列分别用 table标签包装起来,就相当于三个table放在一个div盒子里面。并用左固定列,主列,右固定列的顺序排布。
5,为了产生滚动条,在写主列table的时候外层需要用div去包裹起来,给这个div添加样式,让其可以在一定宽度下进行滚动。
6,并根据左固定列或者右固定列的类型去设置不同的样式,让其固定在左右两边。

3,实现方式

render: function (createElement) { 
// 用来设置左边右边列以及主列的数组
 var vm = this,
      mainCols = [],
      leftCols = [],
      rightCols = [],
// 对父组件传过来的的所有列插槽进行过滤,去分别左固定列,右固定列,主列。  
this.$slots.default.forEach((columnSlot) => {
      var opt = columnSlot.componentOptions;

      if (!opt || opt.tag !== "cvn-table-column") return;

      if (opt.propsData.type === "expand") {
        expandCol = columnSlot;
        return;
      }

      if (opt.propsData.fixed === "right") {
        return rightCols.push(columnSlot);
      } else if (opt.propsData.fixed !== undefined) {
        return leftCols.push(columnSlot);
      } else {
        return mainCols.push(columnSlot);
      }
    });
 // 将固定列使用fixed参数进行标记
 leftCols.forEach(
      (col) => (col.componentOptions.propsData["position"] = "fixed")
    );
    rightCols.forEach(
      (col) => (col.componentOptions.propsData["position"] = "fixed")
    );
    mainCols = leftCols.concat(mainCols, rightCols);
}
// 构造table表格的函数代码
 function parseTable(cols, fixed) {
      if (fixed === "right") mark = "right";
      return createElement(
        "table",
        {
          class: {
            "cvn-table-inner": true,
            "cvn-table-simple": vm.theme === "simple",
            "cvn-table-main": fixed === undefined,
            "cvn-table-fixed-left": fixed === "left",
            "cvn-table-fixed-right": fixed === "right",
            "cvn-table-oneline": vm.validOneline,
          },
          attrs: {
            "cvn-table-id": vm.tableID,
            name:
              fixed === "left"
                ? "cvn-table-fixed-left"
                : fixed === "right"
                ? "cvn-table-fixed-right"
                : "cvn-table-main",
          },
        },
        [
          createElement(
            "thead",
            {
              class: {
                "cvn-table-row-container": true,
                "cvn-table-head-row": vm.height,
              },
            },
            [parseHeader(cols)]
          ),
          createElement(
            "tbody",
            {
              class: {
                "cvn-table-row-container": true,
              },
              attrs: {
                name: "cvn-table-body",
              },
              },
            },
            vm.validData.length === 0
              ? [parseEmptyRow(cols.length, fixed === undefined ? true : false)]
              : expandCol
              ? parseRowPairs(
                  cols,
                  fixed === undefined ? expandCol : null,
                  vm.validData
                )
              : vm.validData.map((rowData, index) =>
                  parseRow(cols, rowData, index)
                )
          ),
        ]
      );
    }

使用下面的方法将 整个table表格渲染出来,并给主列外面的div添加了滚动事件。通过leftCols.length的长度来判断是否要构造左固定列所对应的表格。右固定列同理。

function parseMainView() {
      return [
        leftCols.length > 0 ? parseTable(leftCols, "left") : undefined,
        rightCols.length > 0 ? parseTable(rightCols, "right") : undefined,
        createElement(
          "div",
          {
            class: "cvn-table-view",
            on: {
              scroll: () => {
                vm.throttlenScrollWatch && vm.throttlenScrollWatch();
              },
            },
            attrs: {
              name: "cvn-table-view",
            },
          },
          [parseTable(mainCols)]
        ),
      ];
    }

相关css代码:

.cvn-table-new .cvn-table-inner.cvn-table-fixed-left,
.cvn-table-new .cvn-table-inner.cvn-table-fixed-right {
  position: absolute;
  z-index: 1;
}

.cvn-table-new .cvn-table-inner.cvn-table-fixed-left {
  left: 0;
  top: 0;
  transition: box-shadow ease 0.2s;
  border-right: none !important;
}

.cvn-table-new .cvn-table-inner.cvn-table-fixed-right {
  right: 0;
  top: 0;
  transition: box-shadow ease 0.2s;
  border-left: none !important;
}

.cvn-table-new .cvn-table-inner.cvn-table-main .cvn-table-fixed-column {
  visibility: hidden;
}

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

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

相关文章

鸿蒙3.1 设备管理DeviceManager

介绍 DeviceManager组件在OpenHarmony上提供账号无关的分布式设备的认证组网能力,并为开发者提供了一套用于分布式设备间监听、发现和认证的接口。 其组成及依赖如下所示: 总结 设备管理模块其实就是软总线的包皮服务。目前权限都是控制系统uid,但是根据官方介绍,后续可…

webservice请求数据时找不到类com/sun/tools/internal/xjc/api/XJC

错误信息描述: java.lang.IllegalStateException: Unable to create schema compilerat org.apache.cxf.common.jaxb.JAXBUtils.createSchemaCompilerWithDefaultAllocator(JAXBUtils.java:744)at org.apache.cxf.endpoint.dynamic.DynamicClientFactory.createSch…

Spring 自定义命名空间并解析 NameSpaceHandler

Spring 自定义命名空间解析器 1.主要步骤 主要有以下四步: 编写Schema文件自定义NameSpaceHandler 绑定命令空间自定义 BeanDefinitionParse 解析XML作为bd的配置元信息命名空间映射XML 2.代码实现 需要注意的时,把 spring.handlers 文件与 spring.s…

分类预测 | MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测

分类预测 | MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测 目录 分类预测 | MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测,运行环境Matlab2023b及以上…

实例039 始终在最上面的窗体

实例说明 Windows桌面上允许多个窗体同时显示,但是只有一个窗体能够得到焦点,当一个窗体得到焦点后在其上面的窗体会被得到焦点的窗体遮挡,得到焦点的窗体会显示在最上层,这样被覆盖的窗体就不能完全的显示给用户,如果…

Resolver error: Error: Connecting with SSH timed out

别忘了配置部门内部ip,才能访问服务器 windows卸载重装openssh 参考链接:安装 OpenSSH | Microsoft Learn

PHP自己的框架实现config配置层级存取(完善篇二)

1、实现效果 config(include_once $coreConfig); //加载配置文件config() //获取所有配置 config(DB_HOST) 获取配置 2、按层级配置文件加载,存取配置项 config,function.php function config($varNULL,$valueNULL){static $configarray();if(is_array($var)){…

阻塞IO、非阻塞IO和IO多路复用

文章目录 用户态和内核态操作系统角度的IOIO模型阻塞IO非阻塞IO(NIO)IO多路复用select 、poll和epoll 用户态和内核态 用户态也叫用户空间,内核态也叫内核空间。 操作系统为了保护系统的安全,都会划分出内核空间和用户空间。简单…

seata 的部署和集成

文章目录 seata的部署和集成一、部署Seata的tc-server1.下载2.解压3.修改配置4.在nacos添加配置5.创建数据库表6.启动TC服务 二、微服务集成seata1.引入依赖2.修改配置文件 TODO三、TC服务的高可用和异地容灾1.模拟异地容灾的TC集群2.将事务组映射配置到nacos3.微服务读取nacos…

PHP加密与安全的最佳实践

PHP加密与安全的最佳实践 概述 在当今信息时代,数据安全是非常重要的。对于开发人员而言,掌握加密和安全的最佳实践是必不可少的。PHP作为一种常用的后端开发语言,提供了许多功能强大且易于使用的加密和安全性相关函数和类。本文将介绍一些P…

vue动态修改audio地址

问题:点击后替换url地址,实现了,但是播放器依旧没有反应。 解决:vue中动态替换只是替换了地址,并没有告诉audio标签是否要执行,执行什么操作。要load后才能让它知道,是在喊他,他需求…

geacon_pro配合catcs4.5上线Mac、Linux

我的个人博客: xzajyjs.cn 一些链接 Try师傅的catcs4.5项目: https://github.com/TryGOTry/CobaltStrike_Cat_4.5,最新版解压密码见:https://www.nctry.com/2708.html geacon_pro: https://github.com/testxxxzzz/geacon_pro BeaconTool.jar: https:/…

工业用故障电弧探测器的设计与应用

安科瑞虞佳豪 壹捌柒陆壹伍玖玖零玖叁 故障电弧产生的原因---绝缘破损 原因二:线路绝缘破损,导致相间并联故障电弧及对地故障电弧 (1)电气线路施工时未按规范使用套管等保护措施; (2)野蛮施工等施工不当导致线路绝缘皮破损; …

基于web的人力资源管理系统/基于java的OA系统

摘 要 人力资源管理系统是现代企业的核心内容。随着计算机信息技术的高速发展电子商务模式的空前盛行,企业之间的竞争也从有形的经济市场转向了网络。开发以计算机技术、网络技术、信息技术支持的现代人力资源管理系统,既能提高人力资源管理的技术含量和…

云上社群学习系统部分接口设计详解与测试

目录 一、项目简介 1. 使用统一返回格式+全局错误信息定义处理前后端交互时的返回结果 2.使用ControllerAdviceExceptionHandler实现全局异常处理 3.使用拦截器实现用户登录校验 4. 使用MybatisGeneratorConfig生成常的增删改查方法 5. …

.net core发布到IIS上出现 HTTP 错误 500.19

1.检查.net core 环境运行环境是否安装完成,类似如下环境 2.IIS是否安装全 本次原因就是IIS未安装全导致的 按照网上说的手动重启iis(iisreset)也不行

无涯教程-Perl - telldir函数

描述 此函数返回DIRHANDLE引用的目录列表中读指针的当前位置。此返回值可以由seekdir()函数使用。 语法 以下是此函数的简单语法- telldir DIRHANDLE返回值 此函数返回目录中的当前位置。 例 以下是显示其基本用法的示例代码,/tmp目录中只有两个文件- #!/usr/bin/perl …

Vue用JSEncrypt对长文本json加密以及发现解密失败

哈喽 大家好啊,最近发现进行加密后 超长文本后端解密失败,经过看其他博主修改 JSEncrypt原生代码如下: // 分段加密,支持中文JSEncrypt.prototype.encryptUnicodeLong function (string) {var k this.getKey();//根据key所能编…

由小波变换模极大值重建信号

给定信号, 令小波变换的尺度 则x(t)的二进小波变换为 令为取模极大值时的横坐标,那么就是模极大值。 目标是由坐标、模极大值及最后一级的低频分量重建信号x(t) 为了重建x(t),假定有一信号集合h(t),该集合中信号的小波变换和x(…

JavaScript请求数据的4种方法总结(Ajax、fetch、jQuery、axios)

JavaScript请求数据有4种主流方式,分别是Ajax、fetch、jQuery和axios。 一、Ajax、fetch、jQuery和axios的详细解释: 1、 Ajax Ajax(Asynchronous JavaScript and XML)是一种使用JavaScript在用户的浏览器上发送请求的技术&…