buildadmin+tp8表格操作(7)表格的事件监听

buildadmin 中的事件都已经在 baTable类中定义好了。我们一般不会去修改,万一我们要在事件上有所操作, 我们可以通过事件的 前置和后置 钩子函数来处理
在这里插入图片描述
在这里插入图片描述
那么我们是如何使用这些钩子呢?
我们只需要在 创建对象的时候,定义好这些钩子就可以了。如下例中, baTable类 创建对象的进候,就添加了相应的 before after 钩子

const baTable = new baTableClass(new baTableApi('/admin/examples.table.Event/'),{pk: 'id',column: [{ type: 'selection', align: 'center', operator: false },{ label: t('examples.table.event.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },{label: t('examples.table.event.string'),prop: 'string',align: 'center',operatorPlaceholder: t('Fuzzy query'),operator: 'LIKE',sortable: false,},{label: t('examples.table.event.switch'),prop: 'switch',align: 'center',render: 'switch',operator: 'eq',sortable: false,replaceValue: { '0': t('examples.table.event.switch 0'), '1': t('examples.table.event.switch 1') },},{ label: t('examples.table.event.datetime'), prop: 'datetime', align: 'center', operator: 'eq', sortable: 'custom', width: 160 },{label: t('examples.table.event.create_time'),prop: 'create_time',align: 'center',render: 'datetime',operator: 'RANGE',sortable: 'custom',width: 160,timeFormat: 'yyyy-mm-dd hh:MM:ss',},{ label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },],dblClickNotEditColumn: [undefined, 'switch'],},{defaultItems: { switch: '1', datetime: null },},{// 示例核心代码(1/2)// 操作前置钩子,return false 可取消原操作getIndex() {console.info('%c-------获取表格数据前置--------', 'color:blue')},postDel({ ids }) {console.info('%c-------请求删除前置--------', 'color:blue')console.log('被删除数据', ids)},requestEdit({ id }) {console.info('%c-------请求编辑前置--------', 'color:blue')console.log('被编辑数据', id)},onTableDblclick({ row, column }) {console.info('%c-------双击了单元格,双击具体操作执行前置--------', 'color:blue')console.log('双击携带了数据', row, column)},toggleForm({ operate, operateIds }) {console.info('%c-------表单切换前置--------', 'color:blue')console.log('表单切换携带了数据', operate, operateIds)},onSubmit({ formEl, operate, items }) {console.info('%c-------表单提交前置(尚未请求提交)--------', 'color:blue')console.log('表单提交前携带了数据,您可以在此对数据进行预处理', formEl, operate, items)},onTableAction({ event, data }) {console.info('%c-------表格内部事件 - 前置--------', 'color:blue')console.log('触发的事件和携带的数据为', event, data)},onTableHeaderAction({ event, data }) {console.info('%c-------表头事件 - 前置--------', 'color:blue')console.log('触发的事件和携带的数据为', event, data)},mount() {console.info('%c-------表格初始化前置--------', 'color:blue')},},{// 示例核心代码(2/2)getIndex({ res }) {console.info('%c-------获取表格数据后置--------', 'color:green')console.log('获取数据请求的响应', res)},postDel({ res }) {console.info('%c-------请求删除后置--------', 'color:green')console.log('删除请求的响应', res)},requestEdit({ res }) {console.info('%c-------请求编辑后置--------', 'color:green')console.log('编辑请求的响应', res)},onTableDblclick({ row, column }) {console.info('%c-------双击了单元格,双击具体操作执行后置--------', 'color:green')console.log('双击携带了数据', row, column)},toggleForm({ operate, operateIds }) {console.info('%c-------表单切换后置--------', 'color:green')console.log('表单切换携带了数据', operate, operateIds)},onSubmit({ res }) {console.info('%c-------表单提交后置(已经发送请求)--------', 'color:green')console.log('表单提交请求的响应', res)},onTableAction({ event, data }) {console.info('%c-------表格内部事件 - 后置--------', 'color:green')console.log('触发的事件和携带的数据为', event, data)},onTableHeaderAction({ event, data }) {console.info('%c-------表头事件 - 后置--------', 'color:green')console.log('触发的事件和携带的数据为', event, data)},}
)

通过以上的钩子,就可以响应自定义的事件处理了

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

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

相关文章

flink 1.13.2的pom.xml文件模板

flink 1.13.2的pom.xml文件模板 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven…

性能压力测试的优势与重要性

性能压力测试是软件开发过程中至关重要的一环&#xff0c;它通过模拟系统在极限条件下的运行&#xff0c;以评估系统在正常和异常负载下的表现。这种测试为确保软件系统的可靠性、稳定性和可伸缩性提供了关键信息。下面将探讨性能压力测试的优势以及为什么在软件开发中它具有不…

Python学习笔记(4)

《Python编程&#xff1a;从入门到实践》学习笔记 1.文件和异常 1.1 从文件中读取数据 1.1.1 读取整个文件 要读取文件&#xff0c;需要一个包含几行文本的文件。下面首先来创建一个文件&#xff0c;它包含精确到小数 点后30位的圆周率值&#xff0c;且在小数点后每10位处都换…

传输层协议 - UDP(User Datagrm Protocol)

文章目录&#xff1a; 传输层再谈端口号端口号划分知名端口号&#xff08;Well-Know Port Number&#xff09;netstat 命令iostat 命令pidof UDP 协议UDP 协议格式UDP 协议的特点面向数据报UDP 的缓冲区UDP 使用注意事项UDP 协议的应用基于 UDP 的应用层协议 在 DDoS 攻击中如何…

常用中间件封装思路粗记

MQ 自定义注解 &#xff0c;编写配置类在bean属性初始化SmartInitializingSingleton#afterSingletonsInstantiated后至处理器 去扫描有自定义注解的bean&#xff0c;去创建对应消费者的容器 并启动消费者容器类主要组件DefaultMQPushConsumer SmartInitializingSingleton#afte…

2023年中国吞咽神经和肌肉电刺激仪市场发展趋势分析:产品需求持续增长[图]

吞咽神经和肌肉电刺激仪是通过输出特定的低频脉冲电流对吞咽及构音功能相关的神经和肌肉进行电刺激&#xff0c;改善吞咽、构音肌群的收缩运动功能&#xff0c;缓解神经元麻痹&#xff0c;促进吞咽反射弧的重建与恢复&#xff0c;进而提高患者的吞咽及语言能力。 吞咽神经和肌…

【node】如何在打包前进行请求等操作npm run build

举例&#xff0c;在运行 npm run build 之前将路由表传递给后端&#xff0c;可以采取以下步骤&#xff1a; 创建一个脚本文件&#xff0c;例如 generateRoutes.js&#xff0c;用于生成路由表文件。 在该脚本文件中&#xff0c;导入路由配置文件和后端要接收路由表的接口。 使…

准备后端接口服务环境

准备后端接口服务环境(了解) 安装全局工具 json-server &#xff08;全局工具仅需要安装一次&#xff09; yarn global add json-server 或 npm i json-server -g代码根目录新建一个 db 目录 在db目录新建 index.json 文件 { "cart": [{"id": 100001,&q…

关于电商API接口接入|接口请求重试的8种方法,你用哪种?

日常业务开发过程中&#xff0c;可能第三方的服务器分布在世界的各个角落&#xff0c;所以请求三方接口的时候&#xff0c;难免会遇到一些网络问题&#xff0c;这时候需要加入重试机制了&#xff0c;这期就给大家分享几个接口重试的写法。 重试机制实现 8种重试机制实现 1. …

WPF打开对话框选择文件、选择文件夹

在WPF中实现文件的打开和选择&#xff0c;可以通过使用Microsoft.Win32.OpenFileDialog类来完成。这是一个通用的对话框组件&#xff0c;允许用户在本地文件系统中浏览和选择文件。这个组件属于WPF的一部分&#xff0c;因此不需要引用额外的库。 以下是一个如何使用OpenFileDi…

医院陪诊服务预约小程序的作用如何

对陪诊服务提供者及需求者来说&#xff0c;平台很重要&#xff0c;对服务提供者而言&#xff0c;通过微信私信/电话联系的形式很容易出现漏服务的情况&#xff0c;如遇需求者内容/地址/联系方式/哪家医院等信息提供不清或临时改变主意等&#xff0c;非常烦恼&#xff0c;同时各…

【带头学C++】----- 七、链表 ---- 7.5 学生管理系统(链表--上)

目录 1.main函数设计 2.定义Node节点类型 3.链表插入结点 在main函数中调用插入函数、打印函数 插入结点函数实现&#xff08;头插法&#xff09; 插入结点函数实现&#xff08;尾插法&#xff09; 遍历链表函数实现 4.演示插入、遍历结果 目录 1.main函数设计 2.定义…

在bootstrap中,能不能对同一个容器,既使用类row进行网格设计,又使用类d-flex实现弹性盒子的性能?

问&#xff1a;在bootstrap中&#xff0c;能不能对同一个容器&#xff0c;既使用类row进行网格设计&#xff0c;又使用类d-flex实现弹性盒子的性能&#xff1f; 是的&#xff0c;你可以在Bootstrap中同时使用row类进行网格设计和d-flex类实现弹性盒子。这两个类可以结合使用&a…

React中的Redux:简介和实例代码

React是一个流行的JavaScript库&#xff0c;用于构建用户界面。它提供了一种简单而强大的方式来构建交互式的界面。Redux是一个用于管理应用程序状态的JavaScript库。它可以与React一起使用&#xff0c;以帮助管理React应用程序的状态。 引言 在本文中&#xff0c;我们将介绍R…

linux 安装中文字体

问题 用DevTools调试虚拟机中的headless模式的chromium时发现调试窗口显示的都是□□□&#xff08;除了英文字符&#xff09;&#xff0c;一查发现是因为虚拟机中的CentOS自带的只有英文字体&#xff0c;不包含中文字体&#xff0c;要显示中文字符需要我们自己安装中文字体。 …

nvm 安装后出现的各种问题解决方法

1、nvm安装后无法安装node版本 首先需要确定删除了电脑上所有的node版本&#xff0c;如果不会卸载那么请移步到 查看 &#xff0c;我们是要通过nvm来下载node环境&#xff0c;所以之前下载的node有冲突&#xff0c;所以都要清除。 2、下载后的nvm环境&#xff0c;无法使用node、…

《深入浅出OCR》实战:基于PGNet的端到端识别

✨专栏介绍: 经过几个月的精心筹备,本作者推出全新系列《深入浅出OCR》专栏,对标最全OCR教程,具体章节如导图所示,将分别从OCR技术发展、方向、概念、算法、论文、数据集等各种角度展开详细介绍。 💙个人主页: GoAI |💚 公众号: GoAI的学习小屋 | 💛交流群: 7049325…

团结引擎已全面支持 OpenHarmony 操作系统

Unity 中国宣布与开放原子开源基金会达成平台级战略合作。 据称团结引擎已全面支持 OpenHarmony 操作系统&#xff0c;同时将为 OpenHarmony 生态快速带来更多高品质游戏与实时 3D 内容。Unity 称现在用户可以 “在 OpenHarmony 框架中感受到与安卓和 iOS 同样丝滑的游戏体验”…

【Linux】Alibaba Cloud Linux 3 yum 安装 PHP8.1

一、系统安装 请参考 【Linux】Alibaba Cloud Linux 3 中第二硬盘、MySQL8.、MySQL7.、Redis、Nginx、Java 系统安装 二、安装源 rpm -ivh --nodeps https://rpms.remirepo.net/enterprise/remi-release-8.rpm sed -i s/PLATFORM_ID"platform:al8"/PLATFORM_ID&q…

汇编层面有三个主要的操作对象

1.为啥会有addi指令&#xff1f; 在汇编层面有三个主要的操作对象&#xff1a;寄存器&#xff0c;内存&#xff0c;立即数&#xff0c;它们是完全不同&#xff0c;不可以混淆&#xff0c;组织结构也不一样的不同对象&#xff0c;所以不能单纯拿针对寄存器的指令去处理内存和立…