elmenetui表格二次封装包含查询框和分页

<!--dataList: 表格数据columnList: 表头字段  宽度minWidth使用slotName字段: 需要对列数据进行处理,不写prop字段,使用slotName字段btnText<String>: 按钮字段btnIcon<String>: 按钮的iconbtnEvent: 按钮事件btnType: 按钮类型getHeight<String>: 表格高度pagination: 分页回调方法formItemList: 查询条件List  -----label字段名 type类型(select、input、daterange、cascader)select(selectOptions下拉框数据、defaultSelect下拉框默认选中数据)cascader(options级联选择框数据)   param(用来接收查询参数)search: 查询事件isAddBtn: 是否显示添加按钮
-->
<template><div class="app-container"><el-form:inline="true"ref="ruleForm":model="formInline"class="demo-form-inline"><el-form-itemv-for="(item, index) in formItemList":key="index":label="item.label"><!-- 下拉选择框 --><el-selectv-if="item.type == 'select'"v-model="formInline[item.param]":multiple="item.multiple"placeholder="请选择"size="mini"clearable><el-optionv-for="(item2, index2) in item.selectOptions":key="index2":label="item2.dictLabel":value="item2.dictValue"></el-option></el-select><!-- 下拉选择框end --><!-- 输入框 --><el-inputv-if="item.type == 'input'"v-model="formInline[item.param]"size="mini"placeholder="请输入"clearable></el-input><!-- 输入框 --><!-- 日期范围选择框 --><el-date-pickerv-if="item.type == 'daterange' ||item.type == 'datetimerange' ||item.type == 'date' ||item.type == 'datetime'"v-model="formInline[item.param]":value-format="item.valueFormat || 'yyyy-MM-dd hh:mm:ss'":format="item.format || 'yyyy-MM-dd hh:mm:ss'"clearable:type="item.type || ''":range-separator="item.rangeSeparator || '至'":start-placeholder="item.startPlaceholder":end-placeholder="item.endPlaceholder"placeholder="请选择"size="mini"></el-date-picker><!-- 日期范围选择框end --><!-- 级联选择器 --><el-cascaderv-if="item.type == 'cascader'"v-model="formInline[item.param]"size="mini":options="item.options":props="item.props"clearable></el-cascader><!-- 级联选择器end --></el-form-item><slot name="formItem"></slot><el-form-item style="width:10rem"><el-button type="primary" size="mini" @click="onSubmit">查询</el-button><el-button type="" size="mini" @click="resetForm('ruleForm')">重置</el-button></el-form-item><!-- 可用于显示其他按钮 --><el-form-item style="width:10rem" v-if="isAddBtn"><el-button :type="btnType" :icon="btnIcon" @click="btnEvent">{{ btnText }}</el-button></el-form-item></el-form><el-tableref="table"v-loading="loading":data="dataList":height="getHeight"stripe:header-cell-style="headerCellStyle"><el-table-column label="序号" align="center" width="50" type="index" /><el-table-columnv-for="(item, index) in columnList"ref="table":label="item.label":key="index":prop="item.prop":fixed="item.fixed":min-width="item.minWidth"align="center"><template slot-scope="scope"><slot v-if="item.slotName" :name="item.slotName" :row="scope.row"></slot><div v-else>{{scope.row[item.prop]}}</div></template></el-table-column></el-table><div class="tabListPage"><el-paginationsmallclass="text-center"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page.page":page-sizes="pageSizes":page-size="page.limit"layout="total, sizes, prev, pager, next, jumper":total="total"ref="pagination"></el-pagination></div></div>
</template><script>
export default {data(){let formInline = {};for (const obj of this.formItemList) {formInline[obj.param] = obj.defaultSelect || "";}return{formInline,loading:false,headerCellStyle:{background:'#4d5564',textAlign:'center',flexWrap:'wrap',color:'#fff',fontWeight:'600'},pageSizes: [10, 20, 50, 100],page: {page: 1,limit: 10,},}},props:{dataList:{type:Array,},columnList:{type:Array,},btnText:{type:String,default:'增加'},btnIcon:{type:String,default:'el-icon-plus'},getHeight:{type:String,default:'730'},total: {type: Number,}, // 总条数btnType:{type:String,default:'primary'},isAddBtn:{type:Boolean,default: true},formItemList: {type: Array,default() {return [{label: "下拉框",type: "select",selectOptions: [{ text: 111, value: 111 }],param: "company",defaultSelect: "222", // 下拉框默认选中项multiple: false},{label: "输入框",type: "input",param: "name"},];}}},watch: {// emitSearch(newVal, oldVal) {//   // 是否立即触发搜索  用在弹窗中异步请求下拉框后  或者给下拉框赋值默认值后  需要用到这个方法//   if (newVal) {//     console.log("此时触发--立即执行搜索");//     this.$emit("search", this.formInline);//   }// },formItemList: {handler(newVal, oldVal) {for (const obj of this.formItemList) {if (obj.defaultSelect) {this.formInline[obj.param] = obj.defaultSelect;}}},deep: true},total(newdata, olddata) {if (newdata != olddata) {this.$refs.pagination.internalCurrentPage = 1;this.page.limit = 10;}},},methods:{btnEvent(){this.$emit('btnEvent', );},// 每页条数变更handleSizeChange(val) {this.page.limit = val;this.page.page = 1;this.$emit("pageChange", this.page);},// 当前页码变更handleCurrentChange(val) {this.page.page = val;//  this.$refs.pagination.internalCurrentPage = 1;this.$emit("pageChange", this.page);},onSubmit() {this.$emit("search", this.formInline);},resetForm(formName) {this.$refs[formName].resetFields();let formInline = {};for (const obj of this.formItemList) {// formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个formInline[obj.param] = ""; // 所有筛选条件清空}this.formInline = formInline;this.$emit("search", this.formInline);}}
}
</script><style>
.headerBox{display: flex;justify-content: flex-end;align-items: center;margin-bottom: 10px;
}
.tabListPage{display: flex;justify-content: flex-end;align-items: center;margin-top: 10px;
}
</style>

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

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

相关文章

Go语言基础之基本语法

基本结构 package mainimport "fmt"func main() {fmt.Println("Hello,World!") }package mainimport ("fmt""log""net/http" )func handler(w http.ResponseWriter,r *http.Request) {s : "你好&#xff0c;世界&…

Dockerfile基础

前言 知识点整理 Dockerfile 简介 它是一个没有后缀名的文本文档&#xff0c;里面是组合镜像的一些命令&#xff0c;Docker build命令构建镜像时&#xff0c;通过读取Dockerfile中的指令的顺序&#xff08;自上到下&#xff09;自动生成镜像。 Dockerfile 命令 1. FROM 指…

JPA整合Sqlite解决Dialect报错问题, 最新版Hibernate6

前言 我个人项目中&#xff0c;不想使用太重的数据库&#xff0c;而内嵌数据库中SQLite又是最受欢迎的&#xff0c; 因此决定采用这个数据库。 可是JPA并不支持Sqlite&#xff0c;这篇文章就是记录如何解决这个问题的。 原因 JPA屏蔽了底层的各个数据库差异&#xff0c; 但是…

Android消息机制(Handler、Looper、MessageQueue)

一、ThreadLocal 1、什么是ThreadLocal ThreadLocal 是一个线程内部的数据存储类&#xff0c;通过它可以在指定的线程中存储数据&#xff0c;数据存储以后&#xff0c;只有在指定线程中可以获取到存储的数据&#xff0c;对于其他线程来说则无法获取到数据。 一般来说&#xf…

竞赛 题目:基于深度学习的中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…

说一说HTTP1.0、1.1、2.0版本区别和优化

说一说HTTP1.0、1.1、2.0版本区别和优化 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于传输超文本的应用层协议。 在不同的版本中&#xff0c;HTTP经历了一系列的演进和改进&#xff0c;主要包括HTTP 1.0、HTTP 1.1和HTTP 2.0。 下面详细解释它们之间…

亚马逊第二个大语言模型 Olympus 即将上线

据外媒爆料&#xff0c;亚马逊正在训练他的第二个大语言模型——Olympus&#xff0c;很有可能在今年12月份上线。亚马逊计划将Olympus接入在线零售商店、Echo等设备上的Alexa语音助手&#xff0c;并为AWS平台提供新的功能。据说这个大语言模型规模达到2万亿&#xff08;2000B&a…

C++ 删除无头链上所有指定值为x的节点。

C 删除无头链上所有指定值为x的节点。 #include<stdio.h> #include<ctype.h> #include<stdlib.h> typedef struct app {int data;struct app* next; }APP; int main() {int n;int node;int x;while (scanf("%d", &n) ! EOF){APP* head NULL, …

读《Segment Anything in Defect Detection》

摘要 (好像只是说把SAM应用到了红外缺陷分割领域) 引言 无损检测得到红外图像&#xff0c;根据热能观察异常 贡献&#xff1a; •从两个光学脉冲热成像系统构建广泛的缺陷热数据库&#xff0c;包括各种材料并释放它们。 • 开发DefectSAM&#xff0c;这是第一个用于缺陷检测…

maven升级版本后报错:Blocked mirror for repositories

出现问题的场景&#xff1a; 当 Maven 升级到3.8.1 之后&#xff0c;执行maven就会出现如下报错信息&#xff1a; maven-default-http-blocker (http://0.0.0.0/): Blocked mirror for repositories 原因&#xff1a; maven在3.8.1 的默认配置文件中增加了一组标签&#xff0…

MAC地址注册的网络安全影响和措施分析

MAC地址注册对网络安全具有重要影响&#xff0c;同时也需要采取相应的措施来应对潜在的安全风险。以下是有关MAC地址注册的网络安全影响和应对措施的分析&#xff1a; 影响&#xff1a; 1. 身份验证&#xff1a;MAC地址注册可用于设备的身份验证&#xff0c;但MAC地址本身并不…

033-从零搭建微服务-日志插件(一)

写在最前 如果这个项目让你有所收获&#xff0c;记得 Star 关注哦&#xff0c;这对我是非常不错的鼓励与支持。 源码地址&#xff08;后端&#xff09;&#xff1a;mingyue: &#x1f389; 基于 Spring Boot、Spring Cloud & Alibaba 的分布式微服务架构基础服务中心 源…

【C/PTA】数组进阶练习(一)

本文结合PTA专项练习带领读者掌握数组&#xff0c;刷题为主注释为辅&#xff0c;在代码中理解思路&#xff0c;其它不做过多叙述。 目录 7-1 矩阵运算7-2 方阵循环右移7-3 螺旋方阵7-4 数组-杨辉三角7-5 数组-对角线求和7-6 数组-矩阵最小值 7-1 矩阵运算 给定一个nn的方阵&am…

大一,小小练习题--含答案

测试题 1.(1). 对于int类型的变量&#xff0c;Java编译器和大多数C编译器都是分配4个字节的内存&#xff0c;4个字节有32个二进制位即总共可以拥有多少种状态&#xff0c;其中一半的状态用来存储负数&#xff0c;一半的状态用来存储0和正数。因此&#xff0c;int类型的变量可以…

不标年份的葡萄酒质量好吗?

我们在葡萄酒标上经常看到生产年份&#xff0c;也就是指全部葡萄采摘的年份。旧世界葡萄酒产国认为葡萄酒年份对他们的影响较大&#xff0c;而新世界葡萄酒&#xff0c;年份的意义就稍微小些。甚至有一部分葡萄酒酒标上没有年份。在酒标上没有标注年份的葡萄酒&#xff0c;被称…

WSL2安装ubuntu及修改安装位置,设置Ubuntu开机启动链接ssh服务

1. WSL2安装ubuntu及修改安装位置 2. 设置Ubuntu开机启动链接ssh服务

学习无人机代码框架【第一天】---VMware 安装Ubuntu16.04时显示不全的解决方法

ros环境配置篇 环境配置在vmware上安装ubantu16.04操作系统安装完成后显示界面太小解决办法其他遇到的一些ubantu问题最后一步是在ubantu16上安装ros-kinetic其他很重要的一个工具是安装vmware-tool&#xff0c;可以支持把外部的文件或文字传入到虚拟机中管理不同的终端的软件代…

[C/C++] 数据结构 LeetCode:用队列实现栈

题目描述: 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。int pop() 移除并返回栈顶元…

基于Springboot+Vue家电维修预约系统

需求&#xff1a; 登录后用户选择所在地区 1.日常事务工作人员预约&#xff08;进行分类筛选 如清洁、烹饪等&#xff0c;至少6个&#xff09;每天晚上22:00前预约 第二天起可上门 需要有时段的选择。 2.家电维修预约&#xff08;分类筛选 如&#xff1a;冰箱、空调、网络、电饭…

为什么 Intent 不能传递大数据

Intent 传递不同大小数据时的问题&#xff1a; 传 512k 以下的数据是可以正常传递的&#xff1b;传 512k&#xff5e;1024k 的数据会出错&#xff0c;闪退&#xff1b;传 1024k 以上的数据会报错&#xff1a;TransactionTooLargeException&#xff1b;考虑到 Intent 还包括要启…