vue基于ElementUI/Plus自定义的一些组件

vue3-my-ElementPlus

源码请到GitHub下载使用MyTable、MySelect、MyPagination

置顶|Top

| 使用案例:

1.0 定义表格数据(测试使用)

data() {return {tableData: [],value:[],valueList: [],};
},// 构造表格测试数据// 1 第一行:列名,该行是一个数组let columns = []for (let i = 0; i < 10; i++) {columns[i] = 'column' + i}// 2 其他行:表格数据值,每一行的一个对象let list = [];for (let j = 0; j < 9999; j++) {// 每一行的数据对象let obj = {}for (let i = 0; i < columns.length; i++) {obj[columns[i]] = i + 'value' + j}list.push(obj);// 存储每一行到数组}this.tableData = [columns, list] // 表格数据请传入这个数组console.log('构造表格数据:', list, "\ncolumns:", columns)// 获取某一列的数据,提供给MySelect组件:let i = 6;// 假设获取第6列的数据this.valueList = list.map(obj => ({value: obj[columns[i-1]],label: obj[columns[i-1]]}));

1.1 MyTable

<MyTable :table-data="tableData"/>

1.2 MySelect

// 其中 initValue 为初始化数据,必须传入一个数组,形式为["","","",...]
// 其中每一个字符串的值是 valueList 数组的 value(当然,也可以不是)
<MySelect :initValue="[]":valueList="valueList":placeholder="'placeholder'":multiple="true"@selectorChanged="(e)=>value=e"@selectorCleared="(e)=>value=e"/>

1.3 MyPagination

一般不独立使用,已经内置在上面两个组件中。

细节说明:

| 门槛:

  • 本仓库的组件依赖于 Element UI 或者 Element Plus的组件,需要用户已经熟悉使用相关组件
  • 理论上支持vue2vue3(开发过程中使用选项式API风格,并尽量避免vue3新语法)
  • 此外,表格MyTable、下拉选择MySelect 都依赖的自定义的分页组件 MyPagination

| 使用场景:

  • 表格数据分析很常用,我们常使用Table
  • 对于表格中的每一列,我们常使用Select
  • 对于数量比较大情况,我们常使用Pagination

| 效果展示:

1.1 MyTable

在这里插入图片描述

1.2 MySelect

在这里插入图片描述

1.3 MyPagination

入上图所示,分为两种尺寸。
如上表格MyTable是大尺寸,可以显示更多信息
下拉选择框MySelect小尺寸,仅可以跳转。


| 实现功能:

1.1 MyTable

  • 底部分页的展示、跳转功能
  • 自定义标题(支持比官网更灵活的自定义)
  • 自定义过滤功能

1.2 MySelect

  • 底部分页跳转功能
  • 自定义过滤功能
  • 自定义单选 多选逻辑

1.3 MyPagination

  • 大 小两种尺寸,大的适合表格,小的适合选择框
  • 数据总数展示、每一页多少行数据、页面跳转(可输入)

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

成集云 | 英克ERP对接批发销售门店 | 解决方案

方案介绍 批发连锁门店是一种以批发销售为主&#xff0c;通过连锁经营方式进行管理的商业组织形态。它通常由一个总店或总公司负责管理和运营&#xff0c;下面拥有多个分店或加盟店&#xff0c;形成一个连锁经营网络。主要业务是向下游零售商或消费者销售商品&#xff0c;因此…

【NLP】什么是语义搜索以及如何实现 [Python、BERT、Elasticsearch]

语义搜索是一种先进的信息检索技术&#xff0c;旨在通过理解搜索查询和搜索内容的上下文和含义来提高搜索结果的准确性和相关性。与依赖于匹配特定单词或短语的传统基于关键字的搜索不同&#xff0c;语义搜索会考虑查询的意图、上下文和语义。 语义搜索在搜索结果的精度和相关…

AD9371 官方例程HDL JESD204B相关IP端口信号

AD9371 系列快速入口 AD9371ZCU102 移植到 ZCU106 &#xff1a; AD9371 官方例程构建及单音信号收发 ad9371_tx_jesd -->util_ad9371_xcvr接口映射&#xff1a; AD9371 官方例程之 tx_jesd 与 xcvr接口映射 AD9371 官方例程 时钟间的关系与生成 &#xff1a; AD9371 官方…

C语言实现 1.在一个二维数组中形成 n 阶矩阵,2.去掉靠边元素,生成新的 n-2 阶矩阵;3.求矩阵主对角线下元素之和:4.以方阵形式输出数组。

矩阵形式&#xff1a; 1 1 1 1 1 2 1 1 1 1 3 2 1 1 1 4 3 2 1 1 5 4 3 2 1 完整代码&#xff1a; /*编写以下函数 1&#xff0e;在一个二维数组中形成如以下形式的 n 阶矩阵&#xff1a; 1 1 1 1 1 2 1 1 1 1 3 2 1 1 1 4 3 2 1 1 5 4 3 2 1 2&#xff0e;去掉…

车载网络测试 - UDS诊断篇 - CAN与OSI七层模型

目录 为什么会介绍OSI七层模型&#xff1f; CAN规范与OSI模型 1、Physical Layer 1 2、Data Link Layer 2 3、Network Layer 3 & Transport Protocol Layer 4 4、Transport Protocol Layer 4 5、Session Layer 5 & Presentation Layer 6 & Application Laye…

0基础学习PyFlink——使用DataStream进行字数统计

大纲 sourceMapSplittingMapping ReduceKeyingReducing 完整代码结构参考资料 在《0基础学习PyFlink——模拟Hadoop流程》一文中&#xff0c;我们看到Hadoop在处理大数据时的MapReduce过程。 本节介绍的DataStream API&#xff0c;则使用了类似的结构。 source 为了方便&…

深度学习之基于YoloV5火灾烟雾报警系统(GUI界面)

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、火灾烟雾报警系统四. 总结 一项目简介 YoloV5 是深度学习中用于目标检测的一种算法&#xff0c;可以对输入的图像进行识别&#xff0c;标识出…

【计算机网络笔记】传输层——可靠数据传输之流水线机制与滑动窗口协议

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

Linux的账号管理

本章的学习感觉如果不做系统管理员&#xff0c;作为简单了解就可以了 前面介绍了&#xff0c;用户&#xff0c;组&#xff0c;other三个角色&#xff0c; 每个用户创建都会有uid与之对应&#xff0c;创建的用户基本信息在一下两个文件中&#xff0c;也是我们要介绍的内容&…

【webrtc】 对视频质量的码率控制的测试与探索

目录 环境设置 transport-cc goog-remb (webrtc中的两种码率算法&#xff09; 修改成remb算法 测试 效果 后续 可参考工程 环境设置 要到meshx上操作 telnet 112 然后执行factory_env show |grep meshx_ip 之后telnet meshx_ip 用户名admin 密码****.119 执行一下r…

Python自动化运维监控——批量监听页面发邮件(自由配置ini文件+smtplib)

一、程序样式 1.listen.ini配置文件 2.监控页面 3.日志 二、核心点 smtplib库&#xff1a;这里使用了smtp.qq.com与smtp.163.com两个发送邮件的地址&#xff0c;使用邮箱用户名与授权码来实现登录&#xff0c;端口都使用465&#xff0c;最后抛出异常&#xff0c;finally里…

计算机网络与技术——数据链路层

&#x1f60a;计算机网络与技术——数据链路层 &#x1f680;前言☃️基本概念&#x1f94f;封装成帧&#x1f94f;透明传输&#x1f94f;差错检测 ☃️点对点协议PPP&#x1f94f;PPP协议的特点&#x1f94f;PPP协议的帧格式&#x1f50d;PPP异步传输时透明传输&#xff08;字…

Linux纯C串口开发

为什么要用纯C语言 为了数据流动加速&#xff0c;实现低配CPU建立高速数据流而不用CPU干预&#xff0c;避免串口数据流多次反复上升到软件应用层又下降低到硬件协议层。 关于termios.h 麻烦的是&#xff0c;在 Linux 中使用串口并不是一件最简单的事情。在处理 termios.h 标头…

Vue入门——核心知识点

简介 Vue是一套用于构建用户界面的渐进式JS框架。 构建用户界面&#xff1a;就是将后端返回来的数据以不同的形式(例如&#xff1a;列表、按钮等)显示在界面上。渐进式&#xff1a;就是可以按需加载各种库。简单的应用只需要一个核心库即可&#xff0c;复杂的应用可以按照需求…

Golang Gin 接口返回 Excel 文件

文章目录 1.Web 页面导出数据到文件由后台实现还是前端实现&#xff1f;2.Golang Excel 库选型3.后台实现示例4.xlsx 库的问题5.小结参考文献 1.Web 页面导出数据到文件由后台实现还是前端实现&#xff1f; Web 页面导出表数据到 Excel&#xff08;或其他格式&#xff09;可以…

【算法挑战】设计一个支持增量操作的栈(含解析、源码)

1381.设计一个支持增量操作的栈 https://leetcode-cn.com/problems/design-a-stack-with-increment-operation/ 1381.设计一个支持增量操作的栈 题目描述方法 1: 用数组或链表模拟栈 数组复杂度分析链表复杂度分析代码 方法 2: 空间换时间 图解复杂度分析代码 题目描述 请…

与云栖的浪漫邂逅:记一段寻找云端之美的旅程

云端之旅 2023 年的云栖大会如约而至&#xff0c;这次云栖大会也是阿里新任掌门蔡老板当任阿里巴巴董事局主席以来的第一次。大会与以往有很多不一样的地方&#xff0c;其中 AIGC 更是本届大会的重点议题&#xff01;你会感叹&#xff0c;阿里还是猛啊&#xff01; 我逛了下展…

算法学习打卡day40|343. 整数拆分、96.不同的二叉搜索树

343. 整数拆分 力扣题目链接 题目描述&#xff1a; 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 示例 1&#xff1a; 输入: n 2 输出: 1 解释: 2 1 …

一条 SQL 是如何在 MyBatis 中执行的

前言 MyBatis 执行 SQL 的核心接口为 SqlSession 接口&#xff0c;该接口提供了一些 CURD 及控制事务的方法&#xff0c;另外还可以通过 SqlSession 先获取 Mapper 接口的实例&#xff0c;然后通过 Mapper 接口执行 SQL&#xff0c;Mapper 接口方法的执行最终还是委托到 SqlSe…

Unity屏幕中涂鸦

LineRenderer LineRenderer是Unity中的一个组件&#xff0c;用于在场景中绘制简单的线段。 LineRenderer组件允许你通过设置一系列顶点来定义线段的形状和外观。它会根据这些顶点自动在场景中绘制出线段。 下面是LineRenderer的一些重要属性和方法&#xff1a; positionCou…