vxe-grid 实现配置式form搜索条件 form搜索条件框可折叠 配置式table

文章目录

  • 效果图
  • 代码

效果图

效果图

代码

<template><div class="app-container"><vxe-grid ref='xGrid' v-bind="gridOptions" v-if="tableHeight" :height="tableHeight"><template #billDate="{ data }"><el-date-picker v-model="data.billDate" type="datetimerange"value-format="yyyy-MM-dd HH:mm:ss"range-separator="" start-placeholder="单据开始日期" end-placeholder="单据结束日期"/></template><template #reconciliationTime="{ data }"><el-date-picker v-model="data.reTime" type="datetimerange"value-format="yyyy-MM-dd HH:mm:ss"range-separator="" start-placeholder="开始日期" end-placeholder="结束日期"/></template><template #fromButton="{ data }"><el-button @click="handleQuery" icon="el-icon-search" type="primary"v-hasPermi="['synergy:reconciliation:list']">搜索</el-button><el-button @click="resetQuery" icon="el-icon-refresh">重置</el-button></template><template #operate="scope"><el-button v-if="scope.row.auditState !== '2'" type="text" v-hasPermi="['synergy:reconciliation:add']"@click="editEvent(scope.row)" icon="el-icon-edit">修改</el-button><el-button v-if="scope.row.auditState !== '2'" type="text" v-hasPermi="['synergy:reconciliation:add']"@click="removeRowEvent(scope.row)" icon="el-icon-delete">删除</el-button></template><template #toolbar_buttons><el-row class="mb8" align="middle" type="flex" :gutter="10"><el-col :span="20"><el-row type="flex"><el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"><el-menu-item v-for="item in menus" :key="item.key" :index="item.key">{{ item.name }} {{ item.count ? `(${item.count})` : '' }}</el-menu-item></el-menu><el-radio v-model="radio" label="header" style="margin-top: 8px;margin-left: 5px">表头</el-radio><el-radio v-model="radio" label="body" style="margin-top: 8px;margin-left: -20px">表头+表体</el-radio></el-row></el-col><el-col :span="4" justify="right" style="display: flex;justify-content: flex-end;margin-right: 15px"><el-button @click="insertEvent(0)" icon="el-icon-plus" plain type="primary"v-hasPermi="['price:just:add']">新增</el-button><el-button v-if="removeButton" @click="removeEvent(false)" icon="el-icon-delete" plaintype="danger" v-hasPermi="['price:just:edit']">删除</el-button></el-col></el-row></template></vxe-grid><pagination :limit.sync="pageSize" :page.sync="pageNum" :total="total"@pagination="getList" v-show="total > 0"/></div>
</template>

data定义

gridOptions: {id: 'full_edit_1', //storage需要keepSource: true,//编辑状态下的还原需要border: true,loading: false,align: "center",stripe: true,printConfig: {},exportConfig: {},rowConfig: {isHover: true//高亮显示},formConfig: {titleWidth: 80,titleAlign: 'right',items: [],data: {}},columnConfig: {resizable: true //是否启用列宽调整},customConfig: {storage: true, //是否启用 localStorage 本地保存immediate: true,showFooter: false},toolbarConfig: {refresh: {queryMethod: this.handleQuery},slots: {buttons: 'toolbar_buttons'//自定义工具栏按钮}},editConfig: {trigger: 'dblclick',enabled: true,mode: 'row',showStatus: true //只对 keep-source 开启有效,是否显示单元格新增与修改状态},sortConfig: {trigger: 'cell',//触发方式remote: true //所有列是否使用服务端排序,如果设置为 true 则不会对数据进行处理},filterConfig: {remote: true},//右击菜单menuConfig: {body: {}},importConfig: {remote: true,importMethod: this.importMethod,types: ['xlsx'],modes: ['insert']},checkboxConfig: {labelField: '',reserve: true,highlight: true,range: true},//列columns: [],//较验规则editRules: {},data: []
}
created() {this.gridOptions.menuConfig.body = constant.menuConfig;this.getColumns();//请求tableConfig配置项数据this.priceJustStatic()},
methods: {getColumns() {this.gridOptions.loading = truegetInfoByBusiCode("请求配置项数据").then(res => {if (res.code === 200) {this.gridOptions.columns = JSON.parse(res.data.columns);this.gridOptions.formConfig.items = JSON.parse(res.data.formConfig);this.gridOptions.editRules = JSON.parse(res.data.rules);this.handleQuery();} else {this.gridOptions.loading = false;this.$modal.msgError("获取表数据失败,请重试");}});},getList() { //获取table列表数据this.gridOptions.loading = trueconst params = {pageNum: this.pageNum,pageSize: this.pageSize,form: this.gridOptions.formConfig.data //获取from搜索条件数据}getInfoList(params).then(res => {this.gridOptions.loading = false;if (res.code === 200) {this.gridOptions.data = res.rows;this.total = res.total;}})},handleQuery() {this.pageNum = 1;this.getList();},
}
//from 配置
[{"field": "pId","title": "标题","span": 8,"itemRender": {},"slots": {"default": "pId"}
}, {"field": "billCode","title": "单据号","span": 8,"itemRender": {"name": "VxeInput","props": {"placeholder": "请输入单据号"}}
}, {"field": "sType","title": "标题","span": 8,"folding": true, //开启折叠"itemRender": {},"slots": {"default": "sType"}
}, {"field": "Time","title": "日期","span": 12,"folding": true,//开启折叠"itemRender": {},"slots": {"default": "Time"}
}, {"span": 24,"align": "center","collapseNode": true,//折叠终止"itemRender": {},"slots": {"default": "fromButton"}
}]

在这里插入图片描述

//table 配置
[{"type": "checkbox","width": "50","fixed": "left"
}, {"type": "seq","title": "序号","visible": true,"width": "80"
}, {"field": "id","title": "ID","visible": false,"width": "60","fixed": "left"
}, {"field": "remark","title": "备注","visible": true,"width": "80","slots": {"default": "remark"}
}, {"title": "操作","width": "150","fixed": "right","slots": {"default": "operate"}
}]

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

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

相关文章

Zoom视频会议软件使用

Zoom是一款广受欢迎的视频会议软件&#xff0c;使用它可以轻松地进行远程会议、在线培训和团队协作等。要充分利用Zoom软件的功能&#xff0c;以下是详细具体的使用方法和步骤&#xff1a; 下载安装 下载&#xff1a;访问Zoom官方网站&#xff0c;根据使用的操作系统下载相应的…

ttkefu在线客服系统 机器人+人工客服 全渠道接入客户咨询

ttkefu在线客服系统是一种集成了机器人客服与人工客服&#xff0c;并支持全渠道接入客户咨询的综合解决方案。这种系统能够显著提升客户服务效率&#xff0c;优化客户体验&#xff0c;同时帮助企业降低运营成本 1. 智能机器人客服 自动回复&#xff1a;机器人客服能够自…

自制连点器

B站使用教程&#xff1a;https://www.bilibili.com/video/BV1SR85e4EKw/?vd_source47eba1800d831e86d4778a128740fe73 下载链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1Spv_yVPFB3zoS__VL-nhaQ?pwdyxo1 提取码&#xff1a;yxo1

20.x86游戏实战-远线程注入的实现

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…

Spring AI 应用开发中设置访问 Ollama 的超时时间

使用 Spring AI 开发 AI 应用时&#xff0c;Ollama 通常在本地开发和测试时使用&#xff0c;用来在本地运行大模型。由于本地开发机器的资源限制&#xff0c;当使用 Ollama 运行较大的模型时&#xff0c;大模型给出响应的时间会比较长。Spring AI 提供的 OllamaChatModel 与 Ol…

在Mac上免费恢复误删除的Word文档

Microsoft Word for Mac是一个有用的文字处理应用程序&#xff0c;它与Microsoft Office套件捆绑在一起。该软件的稳定版本包括 Word 2019、2016、2011 等。 Word for Mac 与 Apple Pages 兼容;这允许在不同的操作系统版本中使用Word文档&#xff0c;而不会遇到任何麻烦。 与…

【数据结构】非线性表----树详解

树是一种非线性结构&#xff0c;它是由**n&#xff08;n>0&#xff09;**个有限结点组成一个具有层次关系的集合。具有层次关系则说明它的结构不再是线性表那样一对一&#xff0c;而是一对多的关系&#xff1b;随着层数的增加&#xff0c;每一层的元素个数也在不断变化&…

逆向案例二十三——请求头参数加密,某区块链交易逆向

网址&#xff1a;aHR0cHM6Ly93d3cub2tsaW5rLmNvbS96aC1oYW5zL2J0Yy90eC1saXN0L3BhZ2UvNAo 抓包分析&#xff0c;发现请求头有X-Apikey参数加密&#xff0c;其他表单和返回内容没有加密。 直接搜索关键字&#xff0c;X-Apikey&#xff0c;找到疑似加密位置&#xff0c;注意这里…

零基础学习Python(三)

1. 多重继承 一个子类可以继承多个父类&#xff0c;这与一些编程语言的规则不通。 如果多个父类中有同名的变量和方法&#xff0c;子类访问的顺序是按照继承时小括号里书写的顺序进行访问的。 可以用issubclass(B, A)方法判断B是否为A的子类。 2. 绑定 类中的方法通过参数s…

《TF2.x强化学习手册》P59-P65-SARSA-Q-learning

文章目录 实现SARSA算法和对应的强化学习智能体前期准备实现步骤工作原理初始化算法流程 构建基于Q学习的智能体前期准备实现步骤工作原理SARSA 算法的收敛性&#xff1a;SARSA 适合在线学习和真实系统&#xff1a;Q 学习算法的适用性&#xff1a; 实现SARSA算法和对应的强化学…

HDC使用常见命令

HDC&#xff08;HarmonyOS Device Connector&#xff09;是为开发人员提供的用于调试的命令行工具&#xff0c;通过该工具可以在windows/linux/mac系统上与真实设备进行交互。 使用HDC前&#xff0c;需要配置相关环境变量&#xff1a; 在此电脑 > 属性 > 高级系统设置 &g…

Git常用命令以及使用IDEA集成Gitee

目录 一、设置用户签名 二、初始化本地库 三、查看本地库状态 四、添加文件到暂存区 五、提交本地库 六、修改文件 七、版本穿梭 八、Git分支 九、分支的操作 9.1、查看分支 9.2、创建分支 9.3、切换分支 9.4、合并分支 十、团队协作 十一、Idea集成Git 11.1、配…

Github 2024-07-15 开源项目周报 Top15

根据Github Trendings的统计,本周(2024-07-15统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目5非开发语言项目4JavaScript项目3TypeScript项目2Go项目1Solidity项目1Java项目1Rust项目1免费编程学习平台:freeCodeCamp.org 创建…

3.1-RNN存在的问题以及LSTM的结构

文章目录 1 RNN存在的问题1.1梯度消失问题1.2梯度爆炸问题1.3梯度爆炸的对策 2梯度消失的对策——LSTM2.1输出门2.2遗忘门2.3输入门2.4总结2.5 LSTM梯度的流动 1 RNN存在的问题 RNN存在梯度消失和梯度爆炸的问题。 书上以下图的这句话为例&#xff0c;进行说明&#xff1b;为了…

前瞻断言与后瞻断言:JavaScript 正则表达式的秘密武器

JavaScript 中的前瞻断言&#xff08;lookahead&#xff09;和后瞻断言&#xff08;lookbehind&#xff09;相信用过的小伙伴就知道它的威力了&#xff0c;在一些特定的需求场景下&#xff0c;可以做到四两拨千斤的作用&#xff0c;今天让我们来盘点一下在 JavaScript 正则表达…

昇思25天学习打卡营第14天|munger85

基于MindNLPMusicGen生成自己的个性化音乐 这个所谓的个性化的音乐就是指你输入一段文字它会根据这个文字输出一段音乐这个音乐是贴近于那段文字的所以叫做文生成音乐&#xff0c; 如果网络正常的话就可以直接从下载这个模型。 那么音乐生成的有两种方式呢有两种方式&#xff…

【C++初阶】C/C++内存管理

【C初阶】C/C内存管理 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;C&#x1f96d; &#x1f33c;文章目录&#x1f33c; 1. C/C内存分布 2. C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free 3. C内存管理方式 3…

拉格朗日乘子法和KKT条件

拉格朗日乘子法(Lagrange Multiplier) 和 KKT(Karush-Kuhn-Tucker) 条件是求解约束优化问题的重要方法&#xff0c;在有等式约束时使用拉格朗日乘子法&#xff0c;在有不等约束时使用 KKT 条件。当然&#xff0c;这两个方法求得的结果只是必要条件&#xff0c;只有当目标函数…

ssrf复习(及ctfshow351-360)

1. SSRF 概述 服务器会根据用户提交的URL发送一个HTTP请求。使用用户指定的URL&#xff0c;Web应用可以获取图片或者文件资源等。典型的例子是百度识图功能。 如果没有对用户提交URL和远端服务器所返回的信息做合适的验证或过滤&#xff0c;就有可能存在“请求伪造"的缺陷…

FPGA学习笔记(一) FPGA最小系统

文章目录 前言一、FPGA最小系统总结 前言 今天学习下FPGA的最小系统一、FPGA最小系统 FPGA最小系统与STM32最小系统类似&#xff0c;由供电电源&#xff0c;时钟电路晶振&#xff0c;复位和调试接口JTAG以及FLASH配置芯片组成&#xff0c;其与STM32最大的不同之处就是必须要有…