el-table表格 及其el-pagination分页 封装及其使用

1、首页在components文件夹中新建table文件夹

在这里插入图片描述

table文件夹下table.vue全部代码：

<template><el-table:stripe="stripe":row-key="handlerRowKey()":tree-props="treeProps":border="border":show-summary="showSummary":data="tableData":lazy="lazy":load="treeLoad"style="width: 100%"@cell-click="editCell"@row-click="rowClick"@row-dblclick="rowDblclick":span-method="objectSpanMethod":cell-style="cellStyle":formatter="formatter":height="height"@selection-change="selectionChange":summary-method="summaryMethod"v-loading="loading"element-loading-text="数据加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(7, 25, 39, 0.5)"ref="table"><el-table-columnv-if="selection"type="selection"width="55"align="center"/><el-table-columnv-if="index"type="index":index="indexMethod"label="序号"align="center"width="50"/><!-- 含有多级表头的表格,最多两级 --><template v-if="moreLevel"><template v-for="(coumn, index) in columnOption" :key="index"><el-table-columnv-if="coumn.slot"align="center":prop="coumn.prop":label="coumn.label || coumn.name":width="coumn.width":min-width="coumn.minWidth":fixed="coumn.fixed":formatter="coumn.formatter"><template v-if="coumn.children"><el-table-columnv-for="(itemChild, childIndex) in coumn.children":key="childIndex":prop="itemChild.prop":label="itemChild.label || itemChild.name":align="itemChild.align || 'center'":width="itemChild.width":min-width="itemChild.minWidth":fixed="itemChild.fixed":formatter="itemChild.formatter"><template v-slot="{ row }"><slot :name="itemChild.slot" :row="row" /></template></el-table-column></template><template v-if="!coumn.children" v-slot="{ row }"><slot :name="coumn.slot" :row="row" /></template></el-table-column><el-table-columnv-else:prop="coumn.prop":label="coumn.label":align="coumn.align || 'center'":width="coumn.width":min-width="coumn.minWidth":fixed="coumn.fixed"><template v-if="coumn.children"><templatev-for="(itemChild, childIndex) in coumn.children":key="childIndex"><el-table-columnv-if="itemChild.slot"align="center":prop="itemChild.prop":label="itemChild.label || itemChild.name":width="itemChild.width":min-width="itemChild.minWidth":fixed="itemChild.fixed":formatter="itemChild.formatter"><template v-slot="{ row }"><slot :name="itemChild.slot" :row="row" /></template></el-table-column><el-table-columnv-else:prop="itemChild.prop":label="itemChild.label":align="itemChild.align || 'center'":width="itemChild.width":min-width="itemChild.minWidth":fixed="itemChild.fixed":formatter="itemChild.formatter"><template v-if="itemChild.children"><el-table-columnv-for="(itemChildChild, childChildIndex) in itemChild.children":key="childChildIndex":prop="itemChildChild.prop":label="itemChildChild.label":align="itemChildChild.align || 'center'":width="itemChildChild.width":min-width="itemChildChild.minWidth":fixed="itemChildChild.fixed":formatter="itemChildChild.formatter"></el-table-column></template><template v-if="!itemChild.children" v-slot="{ row }">{{ row[itemChild.prop] }}</template></el-table-column></template></template><template v-if="!coumn.children" v-slot="{ row }">{{ row[coumn.prop] }}</template></el-table-column></template></template><!-- 正常表格 --><template v-else><template v-for="(coumn, index) in columnOption" :key="index"><el-table-columnv-if="coumn.slot":show-overflow-tooltip="showTooltip":align="coumn.align || 'center'":key="coumn.label":prop="coumn.prop":label="coumn.label":width="coumn.width":min-width="coumn.minWidth":fixed="coumn.fixed":formatter="coumn.formatter"><template v-slot="{ row }"><slot :name="coumn.slot" :row="row" /></template></el-table-column><el-table-columnv-else:align="coumn.align || 'center'":sortable="coumn.sortable":show-overflow-tooltip="showTooltip":prop="coumn.prop":label="coumn.label":width="coumn.width":min-width="coumn.minWidth":fixed="coumn.fixed":formatter="coumn.formatter"></el-table-column></template></template></el-table><el-paginationv-if="pageData && pageDataShow"background:page-size="pageData.pageSize":total="pageData.total":pager-count="pagerCount":current-page.sync="pageData.pageNo || pageData.pageNum"class="pagination":layout="layout"@current-change="currentChange"@size-change="sizeChange"/>
</template><script>
export default {name: "ScadaTable",props: {stripe: { type: Boolean, default: true },columnOption: { type: Array, default: () => [] }, // 每一列数据tableData: { type: Array, default: () => [] }, // 表格数据border: { type: Boolean, default: false }, // 是否显示列边框index: { type: Boolean, default: false }, // 是否显示排序selection: { type: Boolean, default: false }, // 是否显示多选框pageData: { type: Object, default: () => {} }, // 分页相关数据，有则显示rowKey: { type: String, default: "id" }, // 树表格必须指定keytreeProps: { type: Object, default: () => {} },tree: { type: Boolean, default: false }, // 是否是树表格objectSpanMethod: { type: Function, default: () => {} }, //合并行或列showSummary: { type: Boolean, default: false },summaryMethod: { type: Function, default: () => {} },cellStyle: { type: Function, default: () => {} },formatter: { type: Function, default: () => {} },loading: { type: Boolean, default: false },moreLevel: { type: Boolean, default: false },height: { type: String, default: "auto" },showTooltip: { type: Boolean, default: true },lazy: { type: Boolean, default: false },pageDataShow: { type: Boolean, default: true },layout: { type: String, default: "prev, pager, next, sizes,total" },pagerCount: {type: Number,default: 7,},},emits: ["editCell","rowClick","rowDblclick","currentChange","sizeChange","treeLoad","selectionChange",],setup(props, context) {const indexMethod = (index) => {if (props.pageData) {return (index +1 +((props.pageData.pageNo || props.pageData.pageNum) - 1) *props.pageData.pageSize);} else {return index + 1;}};const handlerRowKey = () => {return (props.tree && props.rowKey) || "";};//给合计的单元格加上文字提示//点击单元格的时候const editCell = (item, column, cell, event) => {context.emit("editCell", item, column, cell, event);};// 点击行的时候const rowClick = (row, column, event) => {context.emit("rowClick", row, column, event);};// 双击行的时候const rowDblclick = (row, column, event) => {context.emit("rowDblclick", row, column, event);};// 改变页数回调const currentChange = (event) => {context.emit("currentChange", event);};// 改变显示个数回调const sizeChange = (event) => {context.emit("sizeChange", event);};// 树加载const treeLoad = (tree, treeNode, resolve) => {context.emit("treeLoad", tree, treeNode, resolve);};// 选中框状态改变const selectionChange = (selection) => {context.emit("selectionChange", selection);};return {indexMethod,handlerRowKey,editCell,rowClick,rowDblclick,currentChange,sizeChange,treeLoad,selectionChange,};},
};
</script><style lang="scss">
.el-loading-spinner {i {color: #00ffff !important;}.el-loading-text {color: #00ffff !important;}
}
</style>

table文件夹下index.js 全部代码：

import Table from './table.vue'export default Table

components文件夹下的index.js全部代码：

import Table from './table'
const components = [Table,
]export default (Vue) => {components.forEach((ele) => Vue.component(ele.name, ele))
}

在main.js文件中代码（设置为组件）：

import Components from "./components";app.use(Components).use(router).use(store).mount("#app");

用法(结构)：

<!--  表格 --><scada-tableselection indexstripe:showSummary="isShow":loading="tableObj.loading"@selectionChange="tableObj.selectionChange":summaryMethod="tableObj.summaryMethod":moreLevel="true":column-option="tableObj.columnOption":table-data="tableObj.tableData" :objectSpanMethod="tableObj.spanMethod":cellStyle="tableObj.cellStyle":pageData="tableObj .pageData"@currentChange="tableObj .currentChange"@sizeChange="tableObj .sizeChange">><template v-slot:caozuo="{ row }"><el-button type="text" @click="tableObj.deleteData(row)">删除</el-button></template></scada-table>

用法（js):

// 表格
const tableObj = reactive({loading:false,columnOption:[],//表头tableData:[],//表格数据delList:[],//批量删除idmergeObj:{},// 合并行的下标mergeArr:[],// 表格中的列名// 分页pageData: {// 表格分页所需数据pageSize: 10,total: 10,pageNum: 1,usePageHelper: true,},currentChange: (event) => {// 分页页数变化resObj.pageData.pageNum = event;resObj.getData();},sizeChange: (event) => {// 分页大小变化resObj.pageData.pageSize = event;resObj.getData();},// 表格合并方法spanMethod:({ row, column, rowIndex, columnIndex })=>{},// 合计方法summaryMethod:(param)=>{// param列数组；data数据const { columns, data } = param},getData:()=>{// 获取表头数据 },// 多选框选中数组selectionChange:(val)=>{tableObj.delList = val.map(item=>{return item.id})},// 判断多选数组是否为空reduceBtn:()=>{if(tableObj.delList.length === 0){return ElMessage.warning({message:"请选择删除的数据",type:"warning"})}tableObj.deleteData()},// 批量单个删除deleteData:(row) => {ElMessageBox.confirm("此操作将删除阅读资料，是否继续？", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {// 执行删除接口});},// 筛选查询submit:()=>{if(dateRange.value.length > 0){form.beginDate = dateRange.value[0]form.endDate = dateRange.value[1]}else{form.beginDate = ""form.endDate =""}resObj.getData()},// 重置reset:()=>{filterForm.value.resetFields();dateRange.value = []form.plateNumber = "";form.beginDate = "";form.endDate = "" ;resObj.getData()},
})

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

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

相关文章

VMware 上的 Debian Linux 虚拟机无法听到蓝牙耳机的声音解决方案

VMware 上的 Debian Linux 虚拟机无法听到蓝牙耳机的声音解决方案

项目场景&#xff1a; 在Debian上安装QQ音乐&#xff0c;用来摸鱼 问题描述 在安装完QQ音乐后&#xff0c;发现虚拟机无法听到声音&#xff0c;音乐有在正常播放&#xff0c;但是蓝牙耳机没有听到任何声音&#xff1a; 原因分析&#xff1a; 感觉是虚拟机的声卡没有配置&…
阅读更多...
前端缓存问题（浏览器缓存和http缓存）- 解决办法

前端缓存问题（浏览器缓存和http缓存）- 解决办法

问题描述&#xff1a;前端代码更新&#xff0c;但因浏览器缓存问题&#xff0c;导致页面源代码并未更新 查看页面源代码的方法&#xff1a;鼠标右键&#xff0c;点击查看页面源代码 如图&#xff1a; 解决方法&#xff1a; 注&#xff1a;每执行一步&#xff0c;就检查一下浏览…
阅读更多...
c# 端口监控 Helper 以及写一个端口监控工具

c# 端口监控 Helper 以及写一个端口监控工具

c# 端口监控 Helper 以及写一个端口监控工具 介绍核心代码&#xff1a;工具完整编码&#xff1a;1、编写界面2、打开定时控件的属性设置。3、编写定时控件的 Tick 事件结果&#xff08;运行效果&#xff09; 介绍 由于最近做上架比较多&#xff0c;会经常来确保服务器的服务&a…
阅读更多...
c#Action委托和Func委托

c#Action委托和Func委托

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace Action委托 {internal class Program{static void PrintString(){Console.WriteLine("hello world.");}static void PrintInt(int …
阅读更多...
【大师与bug里特】M_Studio《王国之梦》学习笔记

【大师与bug里特】M_Studio《王国之梦》学习笔记

1️⃣ Object & object(✅) 之辨 《7.泛型事件框架〈余2min左右时〉》 不然inspector窗口的最后一行&#xff08;告诉我们订阅者是SceneLoadManager它身上挂了☝️ObjectEventListener用来监听这个事件 有多少个事件注册到这里来了都能够看到&#xff09;还是不会出现 加上…
阅读更多...
新建springboot项目找不到java版本8?

新建springboot项目找不到java版本8?

问题&#xff1a; 在java版本的选择上面没有出现8版本。 解决方法&#xff1a; 点击server URL,然后修改为&#xff1a; https://start.aliyun.com/点击ok之后就可以发现能够找到java8版本了&#xff1a; ok&#xff0c;希望能够帮助到大家&#xff01;
阅读更多...
怎么给PDF文件加密码？关于PDF文件加密的四种方法推荐

怎么给PDF文件加密码？关于PDF文件加密的四种方法推荐

怎么给PDF文件加密码&#xff1f;给PDF文件加上密码是保护文件安全的一种重要方法&#xff0c;特别是当需要在不受授权的访问下保护敏感信息时。这个过程不仅仅是简单地设置密码&#xff0c;而是涉及到对文档内容和访问控制的深思熟虑。加密PDF文件可以有效防止未经授权的用户查…
阅读更多...
Mindspore框架循环神经网络RNN模型实现情感分类|（四）损失函数与优化器

Mindspore框架循环神经网络RNN模型实现情感分类|（四）损失函数与优化器

Mindspore框架循环神经网络RNN模型实现情感分类 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;一&#xff09;IMDB影评数据集准备 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;二&#xff09;预训练词向量 Mindspore框架循环神经网络RNN模型实现…
阅读更多...
Redis 7.x 系列【27】集群原理之通信机制

Redis 7.x 系列【27】集群原理之通信机制

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2 节点和节点2.1 集群拓扑2.2 集群总线协议2.3 流言协议2.4 心跳机制2.5 节点握…
阅读更多...
W30-python03-pytest+selenium+allure访问百度网站实例

W30-python03-pytest+selenium+allure访问百度网站实例

此篇文章为总结性&#xff0c;将pystest、selenium、allure结合起来 功能如下&#xff0c;web自动化&#xff0c;输入baidu网站&#xff0c;搜索“雷军”、打开网页中第一条内容 tools.webkeys 相关文件见附件。 pytestsel.py如下&#xff1a; import time import re impor…
阅读更多...
深入理解计算机系统 CSAPP 家庭作业11.7

深入理解计算机系统 CSAPP 家庭作业11.7

静态内容是指在不同请求中访问到的数据都相同的静态文件。例如&#xff1a;图片、视频、网站中的文件&#xff08;html、css、js&#xff09;、软件安装包、apk文件、压缩包文件等。 /** get_filetype - derive file type from file name*/ void get_filetype(char *filename,…
阅读更多...
数组与链表谁访问更快

数组与链表谁访问更快

一、线性表 线性表是数据结构中的一种基本类型&#xff0c;它由一组线性排列的元素组成。线性表的特点是可以进行顺序访问&#xff0c;但不支持随机访问。 二、非线性表 非线性表是数据结构中另一种类型&#xff0c;如树和图&#xff0c;它们由多个节点组成&#xff0c;节点…
阅读更多...
【运维笔记】数据库无法启动，数据库炸后备份恢复数据

【运维笔记】数据库无法启动，数据库炸后备份恢复数据

事情起因 在做docker作业的时候&#xff0c;把卷映射到了宿主机原来的mysql数据库目录上&#xff0c;宿主机原来的mysql版本为8.0&#xff0c;docker容器版本为5.6&#xff0c;导致翻车。 具体操作 备份目录 将/var/lib/mysql备份到~/mysql_backup&#xff1a;cp /var/lib/…
阅读更多...
湖仓一体架构解析：数仓架构选择（第48天）

湖仓一体架构解析：数仓架构选择（第48天）

系列文章目录 1、Lambda 架构 2、Kappa 架构 3、混合架构 4、架构选择 5、实时数仓现状 6、湖仓一体架构 7、流批一体架构 文章目录 系列文章目录前言1、Lambda 架构2、Kappa 架构3、混合架构4、架构选择5、实时数仓现状6、湖仓一体架构7、流批一体架构 前言 本文解析了Lambd…
阅读更多...
IEC104转MQTT网关支持将IEC104数据转换为华为云平台可识别的格式

IEC104转MQTT网关支持将IEC104数据转换为华为云平台可识别的格式

随着智能电网和物联网技术的深度融合&#xff0c;传统电力系统中的IEC104协议设备正逐步向更加开放、智能的物联网体系转型。华为云作为全球领先的云计算和AI服务提供商&#xff0c;其物联网平台为IEC104设备的接入与数据处理提供了强大的支撑。本文将探讨IEC104转MQTT网关在MQ…
阅读更多...
【Linux网络】应用层协议：HTTP 与 HTTPS

【Linux网络】应用层协议：HTTP 与 HTTPS

本篇博客整理了 TCP/IP 分层模型中应用层的 HTTP 协议和 HTTPS协议&#xff0c;旨在让读者更加深入理解网络协议栈的设计和网络编程。 目录 一、协议是什么 1&#xff09;结构化数据的传输 2&#xff09;序列化和反序列化 补&#xff09;网络版计算器 .1- 协议定制 .2- …
阅读更多...
昇思25天学习打卡营第22天|Pix2Pix实现图像转换

昇思25天学习打卡营第22天|Pix2Pix实现图像转换

Pix2Pix图像转换学习总结 概述 Pix2Pix是一种基于条件生成对抗网络&#xff08;cGAN&#xff09;的深度学习模型&#xff0c;旨在实现不同图像风格之间的转换&#xff0c;如从语义标签到真实图像、灰度图到彩色图、航拍图到地图等。这一模型由Phillip Isola等人在2017年提出&…
阅读更多...
【Android】广播机制

【Android】广播机制

前言 广播机制是Android中一种非常重要的通信机制&#xff0c;用于在应用程序之间或应用程序的不同组件之间传递信息。广播可以是系统广播&#xff0c;也可以是自定义广播。广播机制主要包括标准广播和有序广播两种类型。 简介 在Android中&#xff0c;广播&#xff08;Broa…
阅读更多...
【C++】string类（下）

【C++】string类（下）

个人主页~ string类&#xff08;上&#xff09; string类 二、模拟实现string类1、头文件string.h2、常见构造3、容量函数4、访问及遍历5、类对象修改6、流插入流提取重载 二、模拟实现string类 今天我们来实现一下上篇文章中详细介绍过的接口 1、头文件string.h #pragma onc…
阅读更多...
数据库(MySQL)-DQL数据查询语言

数据库(MySQL)-DQL数据查询语言

DQL(Data Query Language 数据查询语言)的用途是查询数据库数据&#xff0c;如select语句。其中&#xff0c;可以根据表的结构和关系分为单表查询和多表联查。 单表查询 单表查询&#xff1a;针对数据库中的一张数据表进行查询 全字段查询 语法&#xff1a;select 字段名 fro…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023