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.mzph.cn/news/876123.shtml

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

相关文章

fiddler的安装

fiddler的安装

fiddler的安装 1、下载fiddler的安装包 1.1 打开网页 https://www.telerik.com/fiddler1.2找到安装包 1.3下载安装包 2、安装fiddler 2.1双击安装包&#xff0c;弹出安装界面框 3、显示这种就是安装成功 4、如果你报以下的错误&#xff0c;请继续跟教程&#xff0c;不报错不…
阅读更多...
Prometheus各类监控及监控指标和告警规则

Prometheus各类监控及监控指标和告警规则

目录 linux docker监控 linux 系统进程监控 linux 系统os监控 windows 系统os监控 配置文件&告警规则 Prometheus配置文件 node_alert.rules docker_container.rules mysql_alert.rules vmware.rules Alertmanager告警规则 consoul注册服务 Dashboard JSON…
阅读更多...
LeetCode-25 -两两交换链表中的节点

LeetCode-25 -两两交换链表中的节点

力扣24题 题目描述&#xff1a; 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 **题解思路&#xff1a;**递归&#xff0c;确…
阅读更多...
vue3使用递归组件渲染层级结构

vue3使用递归组件渲染层级结构

先看看是不是你想要的&#xff1a; 当有层级去渲染的时候&#xff0c;嵌套的层级不明确&#xff0c;这时只能通过递归组件去渲染。 数据如下&#xff1a; 通过判断subCatalog这个字段的长度是否大于0来确定是否有下级。 上代码&#xff1a;(代码是使用uniapp开发的&#xff0…
阅读更多...
利用Python爬取天气数据并实现数据可视化

利用Python爬取天气数据并实现数据可视化

为了使用Python爬取天气数据并实现数据可视化&#xff0c;我们可以选择几个流行的数据源&#xff0c;比如OpenWeatherMap API&#xff0c;这是一个提供实时和历史天气数据的API。以下是一个简单的步骤指南&#xff0c;包括如何使用Python请求天气数据&#xff0c;并使用Matplot…
阅读更多...
Oracle系统表空间的加解密

Oracle系统表空间的加解密

实验环境 数据库选择的是orclpdb1&#xff0c;当前系统表空间未加密&#xff1a; SQL> show con_nameCON_NAME ------------------------------ ORCLPDB1SQL> select TABLESPACE_NAME, STATUS, ENCRYPTED from dba_tablespaces;TABLESPACE_NAME STATUS …
阅读更多...
LeetCode Hot100 搜索二维矩阵

LeetCode Hot100 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…
阅读更多...
栈和队列的相关练习

栈和队列的相关练习

用队列实现栈 首先引用上一篇博客中的队列的相关操作 typedef int QDatatype; typedef struct QueueNode {QDatatype data;struct QueueNode* next; }QueueNode;typedef struct Queue {QueueNode* head;QueueNode* tail;int size; }Queue;void QueueInit(Queue* pq) {assert(p…
阅读更多...
《Java初阶数据结构》----3.＜线性表---LinkedList与链表＞

《Java初阶数据结构》----3.＜线性表---LinkedList与链表＞

目录 前言 一、链表的简介 1.1链表的概念 1.2链表的八种结构 重点掌握两种 1.3单链表的常见方法 三、单链表的模拟实现 四、LinkedList的模拟实现&#xff08;双链表&#xff09; 4.1 什么是LinkedList 4.2LinkedList的使用 五、ArrayList和LinkedList的区别 前言 …
阅读更多...
机器学习（五） -- 无监督学习（1） --聚类1

机器学习（五） -- 无监督学习（1） --聚类1

系列文章目录及链接 上篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;7&#xff09; --SVM2 下篇&#xff1a;机器学习&#xff08;五&#xff09; -- 无监督学习&#xff08;1&#xff09; --聚类2 前言 tips&#xff1a;标题前有“***”的内容…
阅读更多...
Python 教程（四）：Python运算符合集

Python 教程（四）：Python运算符合集

目录 专栏列表前言1. 算术运算符2. 比较运算符3. 逻辑运算符4. 位运算符5. 赋值运算符6. 成员运算符7. 身份运算符总结 在前三篇教程中&#xff0c;我们学习了 Python 的基本语法和数据结构以及字符串的特性。本篇教程&#xff0c;我们将深入探讨 Python 中的运算符合集。 专栏…
阅读更多...
transformers进行学习率调整lr_scheduler（warmup）

transformers进行学习率调整lr_scheduler（warmup）

一、get_scheduler实现warmup 1、warmup基本思想 Warmup&#xff08;预热&#xff09;是深度学习训练中的一种技巧&#xff0c;旨在逐步增加学习率以稳定训练过程&#xff0c;特别是在训练的早期阶段。它主要用于防止在训练初期因学习率过大导致的模型参数剧烈波动或不稳定。…
阅读更多...
搜维尔科技：Patchwork 3D-提高汽车设计的效率和创造力

搜维尔科技：Patchwork 3D-提高汽车设计的效率和创造力

提高汽车设计的效率和创造力 我们很高兴地宣布推出专为雷诺3DCommerce设计的突破性Blender插件。这款创新工具简化了将车辆配置从Patchwork 3D直接导入领先的免费 3D 建模软件Blender的过程。这款插件彰显了我们致力于提供定制解决方案以满足业务需求的承诺。 主要优点&#x…
阅读更多...
使用图数据库Nebula Graph快速上手史上最大规模的中文知识图谱ownthink_v2教程（没写完，明天再写）

使用图数据库Nebula Graph快速上手史上最大规模的中文知识图谱ownthink_v2教程（没写完，明天再写）

一、前言 本教程主要参考官方教程&#xff1a;使用图数据库 Nebula Graph 数据导入快速体验知识图谱 OwnThink (nebula-graph.com.cn) 来带着大家一步一步复现实验内容。 本教程主要使用到的数据集&#xff1a; ownthink/KnowledgeGraphData: 史上最大规模1.4亿中文知识图谱…
阅读更多...
photoshop学习笔记——选区3 快速选择工具

photoshop学习笔记——选区3 快速选择工具

快速选择工具 W shift W 在3种快速选择工具之间切换 对象选择工具 photoshop CC中没有这个工具&#xff0c;利用AI&#xff0c;将款选中的对象快速的提取选区&#xff0c;测试了一下&#xff0c;选区制作的非常nice快速选择工具 跟磁性套索类似&#xff0c;自动识别颜色相似…
阅读更多...
ClkLog：开源用户行为分析框架，让数据分析更轻松

ClkLog：开源用户行为分析框架，让数据分析更轻松

ClkLog&#xff1a;开源用户行为分析框架&#xff0c;让数据分析更轻松 在数据驱动的时代&#xff0c;找到一个好用的用户行为分析工具真是难上加难。但是今天你有福了&#xff0c;开源免费的 ClkLog 就是你的不二选择&#xff01;本文将为你详细介绍 ClkLog 的功能特点、技术架…
阅读更多...
Spark RPC框架详解

Spark RPC框架详解

文章目录 前言Spark RPC模型概述RpcEndpointRpcEndpointRefRpcEnv 基于Netty的RPC实现NettyRpcEndpointRefNettyRpcEnv消息的发送消息的接收RpcEndpointRef的构造方式直接通过RpcEndpoint构造RpcEndpointRef通过消息发送RpcEndpointRef Endpoint的注册Dispatcher消息的投递消息…
阅读更多...
聚焦民生服务 助力企业发展 区块链应用加速落地

聚焦民生服务 助力企业发展 区块链应用加速落地

聚焦民生服务&#xff0c;助力企业发展&#xff0c;区块链应用正在加速落地。这一趋势体现了区块链技术在多个领域的广泛应用和深远影响。以下是对这一主题的详细分析&#xff1a; 一、区块链在民生服务中的应用 政务服务 数据共享与打通&#xff1a;区块链技术利用其分布式账…
阅读更多...
Python酷库之旅-第三方库Pandas(048)

Python酷库之旅-第三方库Pandas(048)

目录 一、用法精讲 171、pandas.Series.nlargest方法 171-1、语法 171-2、参数 171-3、功能 171-4、返回值 171-5、说明 171-6、用法 171-6-1、数据准备 171-6-2、代码示例 171-6-3、结果输出 172、pandas.Series.nsmallest方法 172-1、语法 172-2、参数 172-3、…
阅读更多...
自动化测试 - selenium 环境搭建

自动化测试 - selenium 环境搭建

在进行自动化测试时&#xff0c;Selenium 是一个非常强大的工具&#xff0c;在使用前需要做一些环境准备。 1. 配置 Chromedriver 访问 Chrome 浏览器的官方网站&#xff08;https://www.google.cn/chrome/&#xff09;&#xff0c;下载并安装 Chrome 浏览器。 接下来&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023