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.xdnf.cn/news/1489275.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

无人机之降落操作及紧急情况处理

无人机之降落操作及紧急情况处理

一、无人机降落操作 1、选择降落地点 a.提前选择一个平坦且没有障碍物的降落点&#xff1b; b.确认降落点周围没有行人或障碍物&#xff0c;保证降落的安全性。 2、降低飞行高度 a.缓慢降低飞行高度&#xff0c;尽量保持匀速下降&#xff0c;防止因下降过快导致无人机受损…
阅读更多...
Android 软键盘挡住输入框

Android 软键盘挡住输入框

Android原生输入法软键盘挡住输入框，网上各种解法，但不起效。 输入框都是被挡住了，第二张图的小点，实际就是输入法的光标。 解法： packages\inputmethods\LatinIME\java\res\values-land config.xml <!-- <fraction name="config_min_keyboard_height"&g…
阅读更多...
数据库变更导致的 Salesforce 史上最严重安全事故

数据库变更导致的 Salesforce 史上最严重安全事故

这两天的 Windows 全球蓝屏事件让大家又一次看到了光鲜软件背后的脆落。借此我们也来回顾另一个软件巨头 Salesforce 史上最严重的一次安全事故。 1 事件回顾 事情发生在 2019 年 5 月 19 日&#xff0c;同样是一个周五。 Salesforce 的工程师往旗下产品 Pardot (B2B Marketi…
阅读更多...
董宇辉离职，我一点都不意外！只不过感觉来的太快

董宇辉离职，我一点都不意外！只不过感觉来的太快

下面这张图&#xff0c;是我在半年多前写的一段随笔&#xff0c;没想到来的这么快&#xff01; 碰巧的是今天中午&#xff0c;在开发者群里有两位老铁自曝&#xff0c;本以为能公司干到老&#xff0c;但公司却不给机会&#xff0c;已经不在是公司员工了。 最近&#xff0c;晓衡…
阅读更多...
加速下载，揭秘Internet Download Manager2024下载器的威力！

加速下载，揭秘Internet Download Manager2024下载器的威力！

1. Internet Download Manager&#xff08;IDM&#xff09;是一款广受欢迎的下载管理软件&#xff0c;以其强大的下载加速功能和用户友好的界面著称。 IDM马丁正版下载如下: https://wm.makeding.com/iclk/?zoneid34275 idm最新绿色版一键安装包链接&#xff1a;抓紧保存以…
阅读更多...
学习在测试时学习（Learning at Test Time）: 具有表达性隐藏状态的循环神经网络（RNNs）

学习在测试时学习（Learning at Test Time）: 具有表达性隐藏状态的循环神经网络（RNNs）

摘要 https://arxiv.org/pdf/2407.04620 自注意力机制在长文本语境中表现良好&#xff0c;但其复杂度为二次方。现有的循环神经网络&#xff08;RNN&#xff09;层具有线性复杂度&#xff0c;但其在长文本语境中的性能受到隐藏状态表达能力的限制。我们提出了一种新的序列建模…
阅读更多...
Django Form表单，常用表单字段

Django Form表单，常用表单字段

在Django中&#xff0c;表单&#xff08;Forms&#xff09;是处理用户输入数据的重要工具。Django提供了两种主要方式来创建和处理表单&#xff1a;使用Django的表单API手动创建表单&#xff0c;或者使用模型表单&#xff08;ModelForms&#xff09;自动从数据库模型生成表单。…
阅读更多...
[SaaS] 盒马设计-＞AI如何为企业经营创造价值

[SaaS] 盒马设计-＞AI如何为企业经营创造价值

D20【AIGC x 零售】AI设计如何为企业经营创造价值&#xff1f;AIGC能力不仅仅是设计师的效率工具&#xff0c;也可以当好企业的大脑&#xff0c;帮助构建企业自己的数字化设计工作流&#xff0c;让设计资产和数据发挥更大价值https://mp.weixin.qq.com/s/tk1ahorN_yQ0N-RTZ2U9x…
阅读更多...
【告别截图烦恼】4款超神截图软件，让你的设计工作飞起来！

【告别截图烦恼】4款超神截图软件，让你的设计工作飞起来！

你是否还在为截图时的繁琐操作头疼&#xff1f;网页内容截不全&#xff0c;图片模糊不清&#xff0c;或是在图层中翻找素材时手忙脚乱&#xff1f;今天&#xff0c;米兔要带你摆脱这些烦恼&#xff0c;介绍四款让你事半功倍的截图软件&#xff01; 1. Snipaste&#xff1a;简单…
阅读更多...
ArrayList底层原理

ArrayList底层原理

1. ArrayList 的基本结构 ArrayList 内部使用一个 Object 类型的数组 elementData 来存储所有的元素。数组的长度可以动态调整。 2. 初始容量和扩容机制 初始容量&#xff1a;当使用无参构造创建一个 ArrayList 实例时会在底层创建一个默认长度为0的数组&#xff0c;可以通过…
阅读更多...
解决vscode+UE5中vscode无法识别头文件，无法函数无法跳转，也无法自动补全的问题。

解决vscode+UE5中vscode无法识别头文件，无法函数无法跳转，也无法自动补全的问题。

一、概述 接上一条博客&#xff0c;虽然解决了报错的问题&#xff0c;但是实际上的问题却没有解决&#xff0c;无论我怎么点击&#xff0c;其都无法完成跳转&#xff0c;也无法完成自动补全的问题。 在网络上搜索了很多资料后&#xff0c;发现是在使用vscode时候UE5在vscode中的…
阅读更多...
masscan 端口扫描——（Golang 简单使用总结）

masscan 端口扫描——（Golang 简单使用总结）

1. 前言 最近要做一个扫描 ip 端口的功能 扫描的工具有很多&#xff0c;但是如何做到短时间扫描大量的 ip 是个相对困难的事情。 市场上比较出名的工具有 masscan和nmap masscan 支持异步扫描&#xff0c;对多线程的利用很好&#xff0c;同时仅仅支持 syn 半开扫描&#xff…
阅读更多...
大模型深度神经网络（Deep Neural Network, DNN）

大模型深度神经网络（Deep Neural Network, DNN）

大模型深度神经网络&#xff08;Deep Neural Network, DNN&#xff09;是一种复杂的机器学习模型&#xff0c;其特点在于包含多个隐藏层&#xff0c;从而赋予模型强大的非线性表达能力和对复杂数据模式的学习能力。以下是对大模型DNN的详细介绍&#xff1a; 一、基本概念 深度…
阅读更多...
AR 眼镜之-充电动画定制-实现方案

AR 眼镜之-充电动画定制-实现方案

目录 &#x1f4c2; 前言 AR 眼镜系统版本 充电动画 1. &#x1f531; 技术方案 1.1 方案介绍 1.2 实现方案 关机充电动画 亮屏/锁屏充电动画 2. &#x1f4a0; 关机充电动画 2.1 关机充电动画核心处理类与路径 2.2 实现细节 步骤一&#xff1a;1&#xff09;定制 …
阅读更多...
Mac printf处理参数的奇特之处（macOS中，printf使用%d输出一个浮点数会发生什么情况？）

Mac printf处理参数的奇特之处（macOS中，printf使用%d输出一个浮点数会发生什么情况？）

今天早上网上冲浪的时候看到了 2016 年的一篇文章&#xff0c;里面提到了一段代码&#xff1a; #include <stdio.h> int main() {double a 10;printf("a %d\n", a);return 0; }说这段代码在 x86&#xff08;IA-32&#xff09;上运行时&#xff0c;输出为0&a…
阅读更多...
通过 C# 写入数据到Excel表格

通过 C# 写入数据到Excel表格

Excel 是一款广泛应用于数据处理、分析和报告制作的电子表格软件。在商业、学术和日常生活中&#xff0c;Excel 的使用极为普遍。本文将详细介绍如何使用免费.NET库将数据写入到 Excel 中&#xff0c;包括文本、数值、数组、和DataTable数据的输入。 文章目录 C# 在Excel单元格…
阅读更多...
算法-----递归~~搜索~~回溯（宏观认识）

算法-----递归~~搜索~~回溯（宏观认识）

目录 1.什么是递归 1.1二叉树的遍历 1.2快速排序 1.3归并排序 2.为什么会用到递归 3.如何理解递归 4.如何写好一个递归 5.什么是搜索 5.1深度&#xff08;dfs&#xff09;优先遍历&优先搜索 5.2宽度&#xff08;bfs&#xff09;优先遍历&优先搜索 6.回溯 1.什…
阅读更多...
GD 32 流水灯

GD 32 流水灯

前言&#xff1a; 通过后面的学习掌握了一些逻辑架构的知识&#xff0c;通过复习的方式将学到的裸机任务架构的知识运用起来&#xff0c;同时巩固前面学到的知识&#xff0c;GPIO的配置等。 开发板上LED引脚使用示意图 注&#xff1a;此次LED灯的点亮凡是是高电平点亮&#xff…
阅读更多...
计科录取75人！常州大学计算机考研考情分析！

计科录取75人！常州大学计算机考研考情分析！

常州大学&#xff08;Changzhou University&#xff09;&#xff0c;简称“常大”&#xff0c;位于江苏省常州市&#xff0c;是江苏省人民政府与中国石油天然气集团有限公司、中国石油化工集团有限公司及中国海洋石油集团有限公司共建的省属全日制本科院校&#xff0c;为全国深…
阅读更多...
AIoTedge边缘物联网平台，开启智能物联新架构

AIoTedge边缘物联网平台，开启智能物联新架构

边缘物联网平台是一种将计算能力、数据处理和应用服务部署在网络边缘的解决方案&#xff0c;旨在提高响应速度、降低带宽需求和增强数据安全。根据搜索结果&#xff0c;边缘物联网平台应具备以下功能&#xff1a; 云边协同&#xff1a; 云边一体架构&#xff0c;通过云端管理边…
阅读更多...
最新文章

Copyright @ 2022~2023