如何实现ElementUI动态表头?

可能看到这个标题,有些小伙伴会有些疑惑,动态表头是个什么东西,怎么没听说过?

其实动态表头在企业的项目中用途还是非常广泛的,比如erp系统什么的

那么动态表头是什么呢?说简单点就是让ElementUI的Table表格可以实现自定义表头展示+表头拖拽排序的一个功能

这个东西我们肯定有很多小伙伴见过只是不知道他叫什么,我们的效果如下图所示:

注意:由于我们项目使用的是vue2,故本教程所展示的代码是vue2写法,如使用的是vue3,请自行修改扩展

所需使用的插件:vuedraggable(拖拽插件) 没有就npm i vuedraggable安装插件

现在我们来写一个自定义表头组件components/indicatorTable/index.vue:

<template>
  <div class="indicator-all-box">
    <el-popover placement="bottom" width="300" trigger="click">
      <div class="add-custom-indicator-container">
        <el-button type="primary" @click="addUserDefinedIndicators"&g

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

本地运行大语言模型(LLMs)

用例 像PrivateGPT、llama.cpp、Ollama、GPT4All、llamafile 等项目的流行度凸显了本地&#xff08;在您自己的设备上&#xff09;运行大型语言模型&#xff08;LLMs&#xff09;的需求。 这至少有两个重要的好处&#xff1a; 1.隐私&#xff1a;您的数据不会发送给第三方&a…

Mars3d实现汽车尾气粒子效果从汽车屁股开始发射效果

本身的汽车尾气粒子效果&#xff1a;在汽车模型的中间发射的↓↓↓↓↓↓↓↓↓↓↓ Mars3d实例中是使用transY偏移值实现汽车尾气粒子效果从汽车屁股开始发射效果&#xff1a; // 动态运行车辆的尾气粒子效果 function addDemoGraphic4(graphicLayer) {const fixedRoute new…

【odoo】如何开启开发者模式,开启有什么作用?

概要 在 Odoo 中&#xff0c;开发者模式&#xff08;Developer Mode&#xff09;是一种专门为开发和调试提供的模式。启用开发者模式可以让开发人员访问到更多的功能和信息&#xff0c;从而更方便地进行模块开发、调试和测试。 启用方式&#xff08;主要两种&#xff09; 1.设…

windows实现python串口编程

一、windows安装python Welcome to Python.org 根据windows是64位找到对应的版本下载 下载完后直接安装即可&#xff01; 打开cmd查看python版本 $ python --version #查看版本 二、串口编程 1、安装pyserial库 pyserial是Python中的一个库,用于处理串口通信。 cmd…

DDP算法之线性化和二次近似(Linearization and Quadratic Approximation)

DDP算法线性化和二次近似 在DDP算法中,第三步是线性化系统动力学方程和二次近似代价函数。这一步是关键,它使得DDP能够递归地处理非线性最优控制问题。通过线性化和二次近似,我们将复杂的非线性问题转换为一系列简单的线性二次问题,逐步逼近最优解。通过这些线性化和二次近…

如何解决 NumPy 无法计算其中一个 5 元素列表的标准差的问题

问题背景 在使用 NumPy 计算统计结果时发现&#xff0c;NumPy 能够接受原始数据列表来计算标准差&#xff0c;却无法接受经过计算后的结果列表。尝试将 std(f10) 替换为 std(solf10)&#xff0c;但引发了错误&#xff1a;AttributeError: Float object has no attribute sqrt。…

vue页面前端初始化表格数据时报错TypeError: data.reduce is not a function

这是初始化表格数据时报的错 。 [Vue warn]: Invalid prop: type check failed for prop "data". Expected Array, got Object found in---> <ElTable> at packages/table/src/table.vue<List> at src/views/org/List.vue<Catalogue> at src/v…

Java毕业设计 基于SSM助学贷款管理系统

Java毕业设计 基于SSM助学贷款管理系统 SSM 助学贷款管理系统 功能介绍 学生&#xff1a;登录 修改密码 学生信息 贷款项目信息 申请贷款 留言信息 公告 学校负责人&#xff1a;登录 修改密码 学生管理 学校负责人信息 贷款项目 贷款申请审批 留言信息 公告 银行负责人&…

媒体邀约人物访谈,如何有效提升品牌影响力?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 品牌选择媒体邀约人物专访的形式来背书&#xff0c;可以带来以下好处&#xff1a; 增强品牌权威性&#xff1a;通过知名媒体的专访&#xff0c;品牌可以借助媒体的权威性来提升自身的信誉…

“运动过量”?想多了,普通骑友没那能力和意志力,好好骑车吧

最近听到“运动过量”这个词挺多的&#xff0c;身为骑行爱好者的校长&#xff0c;感觉又好笑又无奈&#xff0c;所以想写点东西&#xff0c;这篇文通过分析普通骑友的运动习惯、能力和意志力&#xff0c;探讨了“运动过量”这一概念在骑行领域中的适用性。文章指出&#xff0c;…

vue2实现一个简易实用的日历(可特殊标记多个日期)

效果如下&#xff1a; <template><div class"calendar"><div class"header"><button click"previousMonth"><</button><h2>{{ currentYear }}-{{ currentMonth }} </h2><button click"nex…

会员收银系统源码

会员营销是一种基于会员管理的营销方法&#xff0c;通过提供会员专属的优惠、服务和体验&#xff0c;吸引和保留客户&#xff0c;促进客户的持续消费。与直接打折相比&#xff0c;会员营销具有以下优势&#xff1a; 1.增强客户忠诚度 会员营销可以通过提供个性化的服务和专属…

【面试八股文】谈一谈你对TCP和UDP的区别是怎么理解的?

文章目录 一、TCP和UDP的区别,使用打电话和写信来类比1.1 TCP就像打电话1.2 UDP就像写信1.3 总结二、专业的讲解`TCP`和`UDP`的区别2.1 TCP和UDP的概念2.2 是否面向连接2.3 从连接对象个数来看2.3.1 UDP:UDP支持一对一、一对多、多对一、多对多的通信。2.3.3 TCP:TCP是一对一…

快速了解接口测试

1、定义 什么是接口测试&#xff1f; 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。 接口测…

第一次创建next.js项目

当前环境和版本&#xff1a; 创建命令&#xff1a; npx create-next-applatest test-nextjs 下载过程&#xff1a; 虽然下载过程有warning&#xff0c;但是还是下载成功了 node.js稳定版本号&#xff1a;http://t.csdnimg.cn/WokUx 因为它前面warn说要> 18.17.0 所以下载了…

正则表达式常用表示

视频教程&#xff1a;10分钟快速掌握正则表达式 正则表达式在线测试工具&#xff08;亲测好用&#xff09;&#xff1a;测试工具 正则表达式常用表示 限定符 a*&#xff1a;a出现0次或多次a&#xff1a;a出现1次或多次a?&#xff1a;a出现0次或1次a{6}&#xff1a;a出现6次a…

如何避免WordPress更新导致的网站崩溃

我查阅过很多关于如何确保 WordPress 网站安全的建议&#xff0c;其中最常提到的就是及时更新 WordPress。 我按照建议更新了网站&#xff0c;结果却导致网站崩溃。 网站的瘫痪后&#xff0c;我甚至连WordPress仪表板都无法登陆&#xff0c;只留下了一条让我困惑的错误信息&a…

mysql数据库中触发器的使用

一、修改分隔符号 delimiter $$或者是//或者~~都行 二、创建触发器函数名称 create trigger 函数名 三、什么样的操作出发&#xff0c;操作那个表 after&#xff1a;.....之后触发 befor&#xff1a;.....之前触发 insert&#xff1a; 插入触发 update&#xff1a;修改被触发 d…

【Java】已解决java.lang.UnsupportedOperationException异常

文章目录 问题背景可能出错的原因错误代码示例正确代码示例注意事项 已解决java.lang.UnsupportedOperationException异常 在Java编程中&#xff0c;java.lang.UnsupportedOperationException是一个运行时异常&#xff0c;通常表示尝试执行一个不支持的操作。这种异常经常发生…

以太坊智能合约不能调用:一定注意智能合约地址,每次部署地址都会变化;nonce值 什么作用,是什么;在交易中调用智能合约添加附加信息

目录 以太坊智能合约不能调用 一定注意智能合约地址,每次部署地址都会变化 Transaction must include these fields: %r" % missing_keys 缺少nonce nonce值 什么作用,是什么 在交易中调用智能合约添加附加信息 1. 定义智能合约 2. 部署并调用智能合约 注意事项…