vue3+elementPlus封装的一体表格
目录结构
源码
exportOptions.js
export default reactive([{label: '导出本页',key: '1',},{label: '导出全部',key: '2',},
])
index.vue
<template><div class="flex flex-justify-between flex-items-end"><div><el-button-group><slot name="left"></slot><el-dropdown trigger="click" v-if="$attrs.onExport" @command="exportTable"><el-button :size="size">导出<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-for="item in exportOptions" :command="item.key">{{ item.label }}</el-dropdown-item></el-dropdown-menu></template></el-dropdown><el-dropdown trigger="click" v-if="$attrs.onPrint" @command="printTable"><el-button :size="size">打印<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-for="item in printOptions" :command="item.key">{{ item.label }}</el-dropdown-item></el-dropdown-menu></template></el-dropdown></el-button-group></div><el-button-group :size="size"><slot name="right"></slot></el-button-group></div><el-table ref="table" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-class-name="rowClassName":size="size" :data="data" :[heightProp]="height || maxHeight" :border="border" :row-key="rowKey":empty-text="emptyText" v-loading="loading" :show-summary="showSummary" :summary-method="summaryMethod"tooltip-effect="dark" @row-click="rowClick" @cell-click="cellClick" @select="select" @select-all="selectAll"@selection-change="selectionChange" element-loading-text="拼命加载中" element-loading-background="rgba(0, 0, 0, 0.5)"@row-dblclick="rowDblclick"><el-table-column v-if="showSelection" fixed="left" type="selection" :reserve-selection="reserveSelection" width="40"align="center" :selectable="selecteisDisabled"></el-table-column><el-table-column v-if="showIndex" fixed="left" type="index" label="序号" min-width="50"><template slot-scope="scope">{{ pageSize * (currentPage - 1) + (scope.$index + 1) }}</template></el-table-column><slot name="columns"></slot></el-table><el-pagination class="text-end mt-3" v-if="$attrs.handleCurrentChange || $attrs.onSizeChange" :size="size"@size-change="dataSizeChange" @current-change="handleCurrentChange" :page-sizes="[VITE_APP_DATA_SIZE, 20, 30, 50]":page-size="pageSize" :disabled="total <= 0 || loading" :current-page="currentPage"layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</template><script setup>
import { ElButtonGroup, ElButton, ElDropdown, ElTable, ElPagination, ElNotification } from "element-plus";
import { exportExcel } from '@/utils/export-file.js'
import exportOptions from "./exportOptions.js"
import printOptions from "./printOptions.js"
import propsData from "./props.js"const instance = getCurrentInstance();
const props = defineProps(propsData)
const VITE_APP_DATA_SIZE = import.meta.env.VITE_APP_DATA_SIZE;
const emits = defineEmits(['current-change', 'size-change', 'row-click', 'cell-click', 'row-dblclick', 'select', 'select-all', 'selection-change']);const showSelection = computed(() => {return ["select", "selection-change", "select-all"].includes(Object.keys(instance.proxy.$attrs));
})
const heightProp = computed(() => {// 因为elementUI不能 height 和 max-height 同时存在,所以采用动态属性// console.log("height:", props.height, "maxHeight:", props.maxHeight);return props.height ? "height" : "max-height";
})watch(() => props.total, (now) => {if (now === 0) {return}for (let index in exportOptions) {exportOptions[index].disabled = falseprintOptions[index].disabled = false}
})// 翻页
function handleCurrentChange(val) {console.log(`当前页: ${val}`)emits('current-change', val)
}// 页量
function dataSizeChange(val) {console.log(`每页 ${val} 条`)emits('size-change', val)
}// 点击行
function rowClick(row, column, event) {// console.log(row, column, event);emits("row-click", row, column, event);
}// 点击单元格
function cellClick(row, column, cell, event) {emits("cell-click", row, column, cell, event);
}// 双击行
function rowDblclick(row, column, event) {emits("row-dblclick", row, column, event);
}// 选择数据
function select(selection, row) {// console.log(election, row);emits("select", selection, row);}
// 选择数据
function selectionChange(selection) {// console.log(selection);emits("selection-change", selection);}
// 全选数据
function selectAll(selection) {console.log(selection);emits("select-all", selection);}// 导出表格
function exportTable(command) {if (props.total < 1) {$message.warning('无数据可导')return}if (command === '1' || (command === '2' && props.total < 3000)) {exportingExcel(command)} else {$dialog.warning({content: '导出数据量过大,您可以选择联系开发人员导出',positiveText: '好',negativeText: '不导了',onPositiveClick: () => {window.open(import.meta.env.VITE_DEPARTMENT_SERVICE,'_blank','location=no, status=no, menubar=no')},})}
}
// 执行导出表格
async function exportingExcel(command) {const title = prompt('文件名称:', '表' || '')if (!title) returnconst notify = notification('开始下载', title)const res = await exporting(command)try {if (res.code === 0 && res.total > 0) {const columns = []props.columns.filter((item) => {if (item.key) {columns.push({header: item.title, // header是exceljs能识别的字段key: item.key,})}})if (props.showIndex) {res.rows = res.rows.map((item, index) => {return {index: index + 1,...item,}})}exportExcel(columns, res.rows, title)notification('下载成功', title)}} catch {notification('数据响应失败', title)}try {notify.close()} catch {notify.destroy()}
}
function notification(content, title) {return Notification.permission === 'granted'? new Notification(content, { body: title }): ElNotification.info({ content, meta: title })
}
// 打印表格数据
function printTable(command) {if (props.total < 1) {return $message.info('无数据打印')}emits('printing', command)
}defineExpose({exportExcel
})
</script><style scoped lang="scss">
:deep(.n-data-table-tr .n-data-table-resize-button) {width: 1px;left: unset;right: 0;
}:deep(.n-data-table-tr .n-data-table-resize-button::after) {width: 1px;right: -1px;left: unset;
}
</style>
printOptions.js
export default reactive([{label: '打印本页',key: '1',},{label: '打印全部',key: '2',},
])
props.js
export default {// 显示序号列showIndex: {type: Boolean,default: false,},data: {type: Array,default: () => {return []},},columns: {type: Array,default: () => {return []},},loading: {type: Boolean,default: true,},size: {type: String,default: 'medium',},emptyText: {type: String,default: '暂无数据',},border: {type: Boolean,default: true,},total: {type: Number,default: 0,},pageSize: {type: Number,default: Number(import.meta.env.VITE_APP_DATA_SIZE),},currentPage: {type: Number,default: 0,},height: {type: Number,default: 550,},maxHeight: {type: Number,},headerCellStyle: {type: [Function, Object],},cellStyle: {type: [Function, Object],},// 返回值用来决定这一行的 CheckBox 是否可以勾选selecteisDisabled: {type: Function},rowKey: {type: Function,default: undefined,},showSummary: {type: Boolean,default: false,},summaryMethod: {type: Function},exporting: {type: Function,default: undefined,},
}
使用说明
<q-table :data="tableData"><template v-slot:left>表头上左侧容器</template><template v-slot:right>表头上右侧容器</template><template v-slot:columns>数据表体部分</template>
</q-table>
-
参数
见
\props.js
-
事件
['current-change', 'size-change', 'row-click', 'cell-click', 'row-dblclick', 'select', 'select-all', 'selection-change']
-
导出
传入
onExporting
事件,就会显示导出摁扭 -
打印
传入
onPrinting
事件,就会显示打印摁扭 -
选择列
传入
'select', 'select-all', 'selection-change'
其中一种事件,就会显示选择列
相关文章:
vue3+elementPlus封装的一体表格
目录结构 源码 exportOptions.js export default reactive([{label: 导出本页,key: 1,},{label: 导出全部,key: 2,}, ])index.vue <template><div class"flex flex-justify-between flex-items-end"><div><el-button-group><slot name…...
判断是否 AGP7+ 的方法
如何判断? /*** 是否是AGP7.0.0及以上* param project* return*/static boolean isAGP7_0_0(Project project) {def androidComponents project.extensions.findByName("androidComponents")if (androidComponents && androidComponents.hasProp…...
使用 Streamlit +gpt-4o实现有界面的图片内容分析
在上一篇利用gpt-4o分析图像的基础上,进一步将基于 Python 的 Streamlit 库,结合 OpenAI 的 API,构建一个简洁易用的有界面图片内容分析应用。通过该应用,用户可以轻松浏览本地图片,并获取图片的详细描述。 调用gpt-4o…...
树莓集团是如何链接政、产、企、校四个板块的?
树莓集团作为数字影像行业的积极探索者与推动者,我们通过多维度、深层次的战略举措,将政、产、企、校四个关键板块紧密链接在一起,实现了资源的高效整合与协同发展,共同为数字影像产业的繁荣贡献力量。 与政府的深度合作政府在产业…...
Fyne ( go跨平台GUI )中文文档-Fyne总览(二)
本文档注意参考官网(developer.fyne.io/) 编写, 只保留基本用法 go代码展示为Go 1.16及更高版本,ide为goland2021.2??????? ?这是一个系列文章: Fyne ( go跨平台GUI )中文文档-入门(一)-CSDN博客 Fyne ( go跨平台GUI )中文文档-Fyne总览(二)-CSDN博客 Fyne…...
MySQL数据库(3)-SQL基础语言学习
1. DDL数据定义语言 1.1 什么是DDL DDL(Data Definition Language,数据定义语言)是SQL语言的一部分,用于定义和修改数据库结构。DDL主要包括以下三类语句: 1.CREATE:用于创建数据库对象,如数…...
下拉框根据sql数据回显
vue <a-form-item label"XXXX" :labelCol"labelCol" :wrapperCol"wrapperCol" required><a-select v-decorator"[disputeType, validatorRules.disputeType]" style"width: 200px" placeholder"请选择XXXX&q…...
电池销售系统
文末获取源码和万字论文,制作不易,感谢点赞支持。 摘 要 在当今信息爆炸的大时代,由于信息管理系统能够更有效便捷的完成信息的管理,越来越多的人及机构都已经引入和发展以信息管理系统为基础的信息化管理模式,随之信…...
四、镜像构建
四、镜像构建 从镜像大小上来说,一个比较小的镜像只有十几MB,而内核文件需要一百多MB,因此镜像里面是没有内核的,镜像是在被启动为容器后直接使用宿主机的内核,而镜像本身则只提供相应的rootfs,即系统正常…...
FastAPI 响应状态码:管理和自定义 HTTP Status Code
FastAPI 响应状态码:管理和自定义 HTTP Status Code 本文介绍了如何在 FastAPI 中声明、使用和修改 HTTP 状态码,涵盖了常见的 HTTP 状态码分类,如信息响应(1xx)、成功状态(2xx)、客户端错误&a…...
C#设计模式--原型模式(Prototype Pattern)
原型模式是一种创建型设计模式,它允许通过复制现有对象来创建新对象,而无需通过构造函数。这种方式可以提高性能,特别是在创建复杂对象时。C# 中可以通过实现 ICloneable 接口或自定义克隆方法来实现原型模式。 案例 1:文档编辑器…...
使用Goland对6.5840项目进行go build出现异常
使用Goland对6.5840项目进行go build出现异常 Lab地址: https://pdos.csail.mit.edu/6.824/labs/lab-mr.html项目地址: git://g.csail.mit.edu/6.5840-golabs-2024 6.5840运行环境: mac系统 goland git clone git://g.csail.mit.edu/6.5840-golabs-2024 6.5840 cd 6.5840/src…...
使用kibana实现es索引的数据映射和索引模版/组件模版
1 数据映射 数据映射官方链接 1.1 日期映射案例 1.创建一条索引。把索引中的字段生日映射为日期,并制定映射后的格式为年月日 PUT http://10.0.0.91:9200/zhiyong18-luckyboy-date {"mappings": {"properties": {"birthday": {&q…...
基于elementui的远程搜索下拉选择分页组件
在开发一个练手项目的时候,需要一个远程搜索的下拉选择组件; elementui自带的el-select支持远程搜索;但如果一次性查询的数据过多;会导致卡顿。故自己实现一个可分页的远程下拉选择组件 效果: 代码: <…...
每日一题 LCR 074. 合并区间
LCR 074. 合并区间 对遍历顺序注意一下就可以 class Solution { public:vector<vector<int>> merge(vector<vector<int>>& intervals) {int n intervals.size();sort(intervals.begin(),intervals.end());int idx 0;vector<vector<int&g…...
Flink SQL
Overview | Apache Flink FlinkSQL开发步骤 Concepts & Common API | Apache Flink 添加依赖: <dependency><groupId>org.apache.flink</groupId><artifactId>flink-table-api-java-bridge_2.11</artifactId><version>…...
[免费]SpringBoot+Vue企业OA自动化办公管理系统【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的SpringBootVue企业OA自动化办公管理系统,分享下哈。 项目视频演示 【免费】SpringBootVue企业OA自动化办公管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 随着信息技术在管理上越来越深入…...
Linux下编译安装METIS
本文记录Linux下编译安装METIS的流程。 零、环境 操作系统Ubuntu 22.04.4 LTSVS Code1.92.1Git2.34.1GCC11.4.0CMake3.22.1 一、安装依赖 1.1 下载GKlib sudo apt-get install build-essential sudo apt-get install cmake 2.2 编译安装GKlib 下载GKlib代码, …...
LLM学习路径 - 渐进式构建知识体系
LLM学习路径 - 渐进式构建知识体系 文章目录 LLM学习路径 - 渐进式构建知识体系一、模型算法基础二、机器学习三、深度学习四、自然语言处理 (NLP)五、大规模语言模型 (LLM) References 一、模型算法基础 编程基础 Web 框架 深入学习 Gradio 与 Streamlit,理解其构…...
使用Unity脚本模拟绳索、布料(碰撞)
效果演示: 脚本如下: using System.Collections; using System.Collections.Generic; using UnityEngine;namespace PhysicsLab {public class RopeSolver : MonoBehaviour {public Transform ParticlePrefab;public int Count 3;public int Space 1;…...
Qt Chart 模块化封装曲线图
一 版本说明 二 完成示例 此文章包含:曲线轴设置,曲线切换,单条曲线显示,坐标轴。。。 三 曲线图UI创建 在UI界面拖放一个QWidget,然后在 Widget里面放一个 graphicsView 四 代码介绍 1 头文件 #include <QString> #in…...
【Linux】深入理解进程管理与fork系统调用的实现原理
【Linux】深入理解进程管理与fork系统调用的实现原理 进程基本概念描述进程-PCBtask_struct-PCB的一种task_ struct内容分类组织进程 查看进程通过系统调用获取进程标示符Fork 之后的代码共享1. **代码共享**2. **数据段不共享**总结 🌏个人博客主页:个人…...
C语言程序设计P5-2【应用函数进行程序设计 | 第二节】——知识要点:函数的参数及返回值和函数的调用及声明
知识要点:函数的参数及返回值和函数的调用及声明 视频: 目录 一、任务分析 二、必备知识与理论 三、任务实施 一、任务分析 1.求x的n次方的值也就是求n个x的乘积,可把x和n作为函数的形参,定义一个函数power来完成这个功能&am…...
【LeetCode】169.多数元素
题目连接: https://leetcode.cn/problems/majority-element/solutions/2362000/169-duo-shu-yuan-su-mo-er-tou-piao-qing-ledrh/?envTypestudy-plan-v2&envIdtop-interview-150 题目描述: 思路一: 使用哈希表unordered_map记录每个元…...
0x0118消息 WM_SYSTIMER
0x0118消息就是WM_SYSTIMER 编辑框出现输入光标时,产生的消息. 0x0118 would be the undocumented WM_SYSTIMER, which appears to be used for caret blinks. 0x0118是一个undocument 消息, 微软没有记录。 但在一些库的源码中可以看到,比如ATL的库文…...
【Linux内核】Hello word程序
创建测试目录 mkdir -p ~/develop/kernel/hello-1 cd ~/develop/kernel/hello-1 创建MakeFile文件和内核.c文件 nano Makefile nano hello-1.c 编写内容 /* * hello-1.c - The simplest kernel module. */ #include <linux/module.h> /* Needed by all modules */…...
黑马redis
Redis的多IO线程只是用来处理网络请求的,对于读写操作命令Redis仍然使用单线程来处理 Redisson分布式锁实现15问 文章目录 主线程和IO线程是如何协作的Unix网络编程中的五种IO模型Linux世界一切皆文件生产上限制keys *、flushdb、flushall等危险命令keys * 遍历查询100W数据花…...
Robust Depth Enhancement via Polarization Prompt Fusion Tuning
paper:论文地址 code:github项目地址 今天给大家分享一篇2024CVPR上的文章,文章是用偏振做提示学习,做深度估计的。模型架构图如下 这篇博客不是讲这篇论文的内容,感兴趣的自己去看paper,主要是分享环境&…...
集合框架(3)Map
Map接口 现实生活与开发中,我们常会看到这样的一类集合:用户ID与账户信息、学生姓名与考试成绩、IP地址与主机名等,这种一一对应的关系,就称作映射。Java提供了专门的集合框架用来存储这种映射关系的对象,即java.util…...
Java反射机制—Class
Java反射机制是指在运行时动态地获取类的信息以及操作类的成员变量、方法和构造方法的能力。反射机制通过使用Class类来实现,Class类是Java中表示类的类。 通过反射机制,我们可以在运行时动态地创建对象、调用方法、访问属性等。反射机制提供了一种强大…...
C# 新语法中的字符串内插$和{}符号用法详解
自C#6.0开始提供一个新的语法糖,即"$" 符号,配合“{}”使用,它的作用除了是对String.format的简化,还可设置其格式模板,实现了对字符串的拼接优化。 语法格式: $"string {变量表达式}” 语…...
WordPress 独立站是否需要 CDN:深度解析及必要性分析
WordPress 是目前全球最流行的开源内容管理系统(CMS),其易用性和丰富的插件生态使得它成为搭建独立站的首选。然而,随着流量的增加以及用户体验的需求,网站的速度和可靠性变得至关重要。在这种情况下,CDN&a…...
dell电脑开不了机怎么回事?戴尔电脑无法开机解决方法
dell戴尔电脑开不了机,这是很多使用dell电脑用户常遇到的问题。这种故障情况是由多种原因引起,包括硬件故障、软件问题或电源问题等等。dell电脑开不了机怎么办呢?下面便为大家介绍一下相关解决修复方法,帮助用户解决戴尔电脑无法…...
如何解决 JavaScript 中的数组方法不生效?
在 JavaScript 中,数组方法是常用的工具,可以用来对数组进行操作。常见的数组方法包括 push(), pop(), shift(), unshift(), map(), filter(), reduce() 等。 然而,有时候我们会遇到数组方法“失效”或者不按预期工作的情况。这个问题的原因…...
道可云人工智能元宇宙每日资讯|全国工商联人工智能委员会成立会议在南京举办
道可云元宇宙每日简报(2024年12月5日)讯,今日元宇宙新鲜事有: 全国工商联人工智能委员会成立会议在南京举办 全国工商联人工智能委员会成立会议日前在江苏省南京市举办。中央统战部副部长、全国工商联党组书记沈莹出席会议并讲话…...
华为HCIP-Datacom H12-821H12-831 (12月最新题库)
备考HCIP-datacom的小伙伴注意啦 !!! 2024年下半年12月份最新(H12-821和H12-831)题库带解析,有需要的小伙伴移动至文章末 H12-821: H12-831: 1.BGP 邻居建立过程的状态存在以下几种:那么建立一个成功的连接所经历的状态机顺序是 A、3-1-2-5-4 B、1-3-5-2-4 C、…...
模型案例:| 手机识别模型!
导读 2023年以ChatGPT为代表的大语言模型横空出世,它的出现标志着自然语言处理领域取得了重大突破。它在文本生成、对话系统和语言理解等方面展现出了强大的能力,为人工智能技术的发展开辟了新的可能性。同时,人工智能技术正在进入各种应用领…...
AWS创建ec2实例并连接成功
aws创建ec2实例并连接 aws创建ec2并连接 1.ec2创建前准备 首先创建一个VPC隔离云资源并且有公有子网 2.创建EC2实例 1.启动新实例或者创建实例 2.创建实例名 3.选择AMI使用linux(HVM) 4.选择实例类型 5.创建密钥对下载到本地并填入密钥对名称 6.选择自己创建的VPC和公有子网…...
短视频矩阵系统开发|技术源代码部署
短视频矩阵系统通过多账号运营管理、多平台视频智能分发等功能,助力企业实现视频引流、粉丝沉淀和转化。 短视频矩阵系统是一种创新的营销工具,它整合了多账号管理、视频智能分发、数据可视化等多种功能,为企业在短视频领域的发展提供了强大…...
C# GDI绘制的小熊进度条
C# GDI小熊进度条 1、添加自定义控件winform using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;…...
java书 核心技术+卷一+4
5.4 对象包装器与自动装箱 package 反射; import java.util.AbstractList; import java.util.ArrayList; public class test {public static void main(String[] args) {int a10;ArrayList<Integer> xxnew ArrayList<>();xx.add(a); //自动装箱int bxx.get(0);//…...
用Python开发一个经典打砖块小游戏
Python 的 pygame 库让我们可以轻松开发经典的小游戏。今天,我们将实现一个“打砖块”小游戏,带你体验游戏开发的乐趣。 一、游戏设计 1.1 游戏规则 玩家通过移动滑板接住弹起的球。球撞击砖块会让砖块消失,玩家得分。如果球落地,游戏失败。1.2 技术点 碰撞检测:检测球与…...
RTCMultiConnection 跨域问题解决
js套件地址 https://github.com/muaz-khan/RTCMultiConnection server套件地址 https://github.com/muaz-khan/RTCMultiConnection-Server 要解决的就是server代码的跨域问题 原装写法: 解决写法: // 喜欢组合语法的自己组 const io new ioServer.S…...
使用GO--Swagger生成文档
概述 在前后端分离的项目中,后端配置swagger可以很好的帮助前端人员了解后端接口参数和数据传输。go-swagger 是一个功能全面且高性能的Go语言实现工具包,用于处理Swagger 2.0(即OpenAPI 2.0)规范。它提供了丰富的工具集&#x…...
简易图书管理系统
javawebjspservlet 实体类 package com.ghx.entity;/*** author :guo* date :Created in 2024/12/6 10:13* description:* modified By:* version:*/ public class Book {private int id;private String name;private double pri…...
探索自然语言处理奥秘(NLP)
摘要 自然语言处理(NLP)是人工智能领域的一个重要分支,它致力于使计算机能够理解、解释和生成人类语言。这项技术让机器能够阅读文本、听懂语音,并与人类进行基本的对话交流。 通俗理解 自然语言处理(NLP)…...
刘铁猛C#入门 030 泛型,partial类,枚举,结构
泛型(generic)无处不在 为什么需要泛型:避免成员膨胀或者类型膨胀 正交性:泛型类型(类/接口/委托/......)泛型成员(属性/方法/字段/....类型方法的参数推断 泛型接口/类的 类型参数不只有一个泛型与委托、lambda表达式实现泛型接口类时 ,实现…...
迅雷 11.2.2 | 本地会员版,不限速下载,支持云盘
迅雷 v11.2.2 是一款带网盘功能的绿色版下载工具。双击“!)绿化”文件即可在桌面生成快捷图标。该版本干净简洁,仅保留下载和云盘两项核心功能。点击左上角的【新建】按钮,可新建链接下载任务。即使在网络条件一般的情况下(如50M宽带…...
P3131 [USACO16JAN] Subsequences Summing to Sevens S
题目描述 Farmer Johns NN cows are standing in a row, as they have a tendency to do from time to time. Each cow is labeled with a distinct integer ID number so FJ can tell them apart. FJ would like to take a photo of a contiguous group of cows but, due to a…...
股指期货基差为正数,这是啥意思?
在股指期货的世界里,有个挺重要的概念叫“基差”。说白了,基差就是股指期货的价格和它对应的现货价格之间的差价。今天,咱们就来聊聊当这个基差为正数时,到底意味着啥。 基差是啥? 先复习一下,基差 股指…...