当前位置: 首页 > news >正文

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>

相关文章:

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

<!--dataList: 表格数据columnList: 表头字段 宽度minWidth使用slotName字段: 需要对列数据进行处理&#xff0c;不写prop字段&#xff0c;使用slotName字段btnText<String>: 按钮字段btnIcon<String>: 按钮的iconbtnEvent: 按钮事件btnType: 按钮类型getHeigh…...

【机器学习Python实战】线性回归

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习python实战 欢迎订阅&#xff01;后面的内容会越来越有意思~ ⭐内容说明&#xff1a;本专栏主要针对机器学习专栏的基础内容进行python的实现&#xff0c;部分…...

做外贸这么久,为什么一直做不好?

很多外贸业务员在开发客户过程中&#xff0c;总感觉自己做了很多事情&#xff0c;聊了很多客户&#xff0c;但却总是拿不到单子。 其实&#xff0c;这是由于缺乏对采购商心理的认识程度&#xff0c;没有换位思考&#xff0c;该做的事没做&#xff0c;不该做的事却忙得忘乎所以&…...

IPv4数据报格式

IPv4是IP协议的第四个版本(版本1-3和版本5都未曾使用过)IP地址不能反映任何有关主机位置的地理信息以前还有个逆地址解析协议RAPR(Reverse APR)&#xff0c;它的作用是使只知道自己MAC地址的主机能通过RAPR找到其IP地址&#xff0c;而现在的DHCP(Dynamic Host Configuration Pr…...

搭建网关服务器实现DHCP自动分配、HTTP服务和免密登录

目录 一. 实验要求 二. 实验准备 三. 实验过程 1. 网关服务器新建网卡并改为仅主机模式 2. 修改新建网卡IP配置文件并重启服务 3. 搭建网关服务器的dhcp服务 4. 修改server2网卡配置文件重启服务并效验 5. 设置主机1的网络连接为仅主机模式 6. 给server2和网关服务器之…...

【18年扬大真题】给定有m个整数的递增有序数组a和有n个整数的递减有序数组b,将a数组和b数组归并为递增有序的数组c

【18年扬大真题】 给定有m个整数的递增有序数组a和有n个整数的递减有序数组b&#xff0c; 将a数组和b数组归并为递增有序的数组c。 void Merge(int arr[],int m ,int brr[],int n,int crr[]) {int i 0;int j n-1;int k 0;while(i < m&&j > 0) {if (arr[i] &l…...

图片叠加_图片压缩

图片叠加 try {/* 1 读取第一张图片*/File fileOne new File("1.png");BufferedImage imageFirst ImageIO.read(fileOne);/* 2读取第二张图片 */File fileTwo new File("2.png");BufferedImage imageSecond ImageIO.read(fileTwo);//创建一个最底层画…...

Mybatis-Plus《学习笔记 22版尚硅谷 》——感谢【尚硅谷】官方文档

Mybatis-Plus《学习笔记 22版尚硅谷 》 一、MyBatis-Plus1.简介2.特性3.支持数据库4.框架结构5.官方地址 二、入门案例1.开发环境2.建库建表3.创建工程4.配置编码5.测试查询 三、增删改查1.BaseMapper<T>2.调用Mapper层实现CRUD2.1 插入2.2 删除a、根据ID删除数据b、根据…...

git安装后报git: ‘remote-https‘ is not a git command. See ‘git --help‘.

1. 问题说明 使用的是linux系统&#xff0c;采用编译安装的方式进行安装&#xff0c;安装完成clone项目后提示“git: ‘remote-https’ is not a git command. See ‘git --help’.” 2. 问题解决 需要安装1个额外的库&#xff1a;libcurl4-openssl-de sudo apt-get install …...

场景交互与场景漫游-交运算与对象选取(8-1)

交运算与对象选取 在面对大规模的场景管理时&#xff0c;场景图形的交运算和图形对象的拾取变成了一项基本工作。OSG作为一个场景管理系统&#xff0c;自然也实现了场景图形的交运算&#xff0c;交运算主要封装在osgUtil 工具中在OSG中&#xff0c;osgUtil是一个非常强有力的工…...

Vue中动态Class实战

效果展示 需求 想实现一个假如有5个div块&#xff0c;默认都是灰色&#xff0c;鼠标悬浮到哪个div上&#xff0c;那个div就显示为黑色。 具体的实现业务逻辑可根据这个进行演变 设计 通过动态 class 类名来实现&#xff0c;实现鼠标悬浮到div时动态绑定class 版本 Vue 3.…...

B站短视频如何去水印?一键解析下载B站视频!

在浏览B站视频时&#xff0c;我们有时会遇到带有水印的场景。这些水印可能会干扰我们对视频内容的观看体验&#xff0c;特别是在全屏观看时。此外&#xff0c;当我们想要保存或分享这些视频时&#xff0c;水印也会成为一种障碍。因此&#xff0c;去除水印的需求就变得非常迫切。…...

最大子段和(分治法+动态规划法)

求最大子段和 此类问题通常是求数列中连续子段和的最大值&#xff0c;经典的股票问题就是考察的这个思想及拓展。 例题&#xff1a; AcWing:1054. 股票买卖 Leetcode:53. 最大子数组和 分治法O(nlogn) 此类问题时分适合采用分治思想&#xff0c;因为所有子区间 [ s t a r t …...

内置函数和消息传递API

消息传递范式 消息函数、聚合函数与更新函数 消息函数接受一个参数 edges&#xff0c;这是一个 EdgeBatch 的实例&#xff0c; 在消息传递时&#xff0c;它被DGL在内部生成以表示一批边。edges 有 src、 dst 和 data 共3个成员属性&#xff0c; 分别用于访问源节点、目标节点…...

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

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

2023年【高处安装、维护、拆除】模拟考试题及高处安装、维护、拆除模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【高处安装、维护、拆除】模拟考试题及高处安装、维护、拆除模拟考试题库&#xff0c;包含高处安装、维护、拆除模拟考试题答案和解析及高处安装、维护、拆除模拟考试题库练习。安全生产模拟考试一点通结合国家…...

简单模拟 Spring 创建的动态代理类(解释一种@Transactional事务失效的场景)

模拟 Spring 创建的动态代理类 本文主要目的是从父类和子类继承的角度去分析为什么在 Service 标注的业务类中使用 this 调用方法会造成事务失效。解释在这种情况下 this 为什么是原始类对象而不是代理类对象。 问题描述 在 Service 标注的业务类中&#xff0c;如果调用本类…...

万户OA upload任意文件上传漏洞复现

0x01 产品简介 万户OA ezoffice是万户网络协同办公产品多年来一直将主要精力致力于中高端市场的一款OA协同办公软件产品&#xff0c;统一的基础管理平台&#xff0c;实现用户数据统一管理、权限统一分配、身份统一认证。统一规划门户网站群和协同办公平台&#xff0c;将外网信息…...

如何写好一篇软文?怎样写软文比较有吸引力?

软文&#xff0c;即柔性广告&#xff0c;是一种通过文字、图片等形式&#xff0c;将广告信息融入到内容中&#xff0c;以达到宣传、推广、营销目的的文章。企业和品牌每天都会在互联网上投放大量软文&#xff0c;软文起到润物细无声的作用&#xff0c;可以在无形中影响用户心智…...

从0开始学习JavaScript--JavaScript中的对象

JavaScript中的对象是一种重要的数据结构&#xff0c;它不仅是语言的基石&#xff0c;还提供了丰富的功能和灵活性。本文将深入研究JavaScript对象的创建、属性访问、方法定义&#xff0c;以及实际应用中的技巧&#xff0c;通过丰富的示例代码&#xff0c;帮助读者更全面地了解…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...