buildadmin+tp8表格操作(7.1)表格的事件监听(el-table中的事件)

因为buildAdmin是封装的 el-table的组件,所以el-table中的事件, 也是可以使用的, 两者有几个事件是有共同的(比如 双击事件), 这时可以根据自己的需要自行选择

以下代码是 buildadmin 使用 el-table中的事件的例子
可以看到, table 组件中 绑定了很多的事件, 这些事件都是 el-table的事件
在这里插入图片描述

<template><div class="default-main ba-table-box"><el-alert class="ba-table-alert" type="info" show-icon><template #default><div class="ba-markdown"><div>对表格内各种行为事件的监听示例,<code>el-table 事件</code></div><div>1、请按下<code>F12</code>从浏览器控制台查看更多细节</div><div>2、请单击/右击/双击单元格、行、表头等触发 el-table 事件</div></div></template></el-alert><TableHeader:buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']":quick-search-placeholder="t('Quick search placeholder', { fields: t('examples.table.event2.quick Search Fields') })"></TableHeader><!-- 示例核心代码(1/2) --><!-- 我们在此示例了 el-table 的各种事件 --><!-- 以此类推,el-table 自带的属性也都是可以使用的 --><Table@cell-mouse-enter="onCellMouseEnter"@cell-mouse-leave="onCellMouseLeave"@cell-click="onCellClick"@cell-contextmenu="onCellContextmenu"@row-click="onRowClick"@row-contextmenu="onRowContextmenu"@row-dblclick="onDblclick"@header-click="onHeaderClick"@header-contextmenu="onHeaderContextmenu"@header-dragend="onHeaderDragend"ref="tableRef"></Table><!-- 温馨提示 --><!-- 事件 select、select-all、selection-change、cell-dblclick、sort-change 请使用 ba-table 的钩子 --><!-- 事件 filter-change	可用,但请自行实现筛选,buildadmin 并未使用 el 提供的表格筛选模式 --><PopupForm /></div>
</template><script setup lang="ts">
import { ref, provide, onMounted } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'defineOptions({name: 'examples/table/event2',
})const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])/*** 示例核心代码(2/2)*/
const onCellMouseEnter = (row: TableRow, column: TableColumn, cell: HTMLElement, event: MouseEvent) => {console.info('%c-------单元格 hover 进入--------', 'color:blue')console.log('参数', row, column, cell, event)
}const onCellMouseLeave = (row: TableRow, column: TableColumn, cell: HTMLElement, event: MouseEvent) => {console.info('%c-------单元格 hover 退出--------', 'color:blue')console.log('参数', row, column, cell, event)
}const onCellClick = (row: TableRow, column: TableColumn, cell: HTMLElement, event: PointerEvent) => {console.info('%c-------单元格被点击--------', 'color:blue')console.log('参数', row, column, cell, event)
}const onCellContextmenu = (row: TableRow, column: TableColumn, cell: HTMLElement, event: PointerEvent) => {console.info('%c-------单元格被右击--------', 'color:blue')console.log('参数', row, column, cell, event)
}const onRowClick = (row: TableRow, column: TableColumn, event: PointerEvent) => {console.info('%c-------某一行被点击--------', 'color:blue')console.log('参数', row, column, event)
}const onRowContextmenu = (row: TableRow, column: TableColumn, event: PointerEvent) => {console.info('%c-------某一行被右击--------', 'color:blue')console.log('参数', row, column, event)
}const onDblclick = (row: TableRow, column: TableColumn, event: MouseEvent) => {console.info('%c-------某一行被双击--------', 'color:blue')console.log('参数', row, column, event)
}const onHeaderClick = (column: TableColumn, event: PointerEvent) => {console.info('%c-------表头被点击--------', 'color:blue')console.log('参数', column, event)
}const onHeaderContextmenu = (column: TableColumn, event: PointerEvent) => {console.info('%c-------表头被右击--------', 'color:blue')console.log('参数', column, event)
}const onHeaderDragend = (newWidth: number, oldWidth: number, column: TableColumn, event: MouseEvent) => {console.info('%c-------列宽度改变--------', 'color:blue')console.log(newWidth, oldWidth, column, event)
}const baTable = new baTableClass(new baTableApi('/admin/examples.table.Event2/'),{pk: 'id',column: [{ type: 'selection', align: 'center', operator: false },{ label: t('examples.table.event2.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },{label: t('examples.table.event2.string'),prop: 'string',align: 'center',operatorPlaceholder: t('Fuzzy query'),operator: 'LIKE',sortable: false,},{label: t('examples.table.event2.switch'),prop: 'switch',align: 'center',render: 'switch',operator: 'eq',sortable: false,replaceValue: { '0': t('examples.table.event2.switch 0'), '1': t('examples.table.event2.switch 1') },},{ label: t('examples.table.event2.datetime'), prop: 'datetime', align: 'center', operator: 'eq', sortable: 'custom', width: 160 },{label: t('examples.table.event2.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 },}
)provide('baTable', baTable)onMounted(() => {baTable.table.ref = tableRef.valuebaTable.mount()baTable.getIndex()?.then(() => {baTable.initSort()baTable.dragSort()})
})
</script><style scoped lang="scss"></style>

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

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

相关文章

labview运行速度太慢

找到labview程序运行速度的瓶颈 - 百度文库 LabVIEW执行速度 - 北京瀚文网星科技有限公司 性能和内存信息窗口 必需&#xff1a;基础版开发系统 选择工具性能分析性能和内存&#xff0c;可显示该窗口。 该窗口用于采集和显示VI的执行时间和内存使用信息。如在不属于项目的…

用公式告诉你 现货黄金投资者要不要换策略?

看过笔者相关文章的朋友都知道&#xff0c;其实笔者是相当不鼓励投资者更改策略的。但这并不意味着&#xff0c;策略不能改或者换。之所以反对更改策略&#xff0c;是因为很多人对自己的策略还没上手&#xff0c;没了解清楚就急着换策略&#xff0c;这是没必要的。通过下面这个…

Vuex 组件间通讯

组件间通讯 Vuex https://vuex.vuejs.org/zh/ 基本原理 数据提取到父级 // index 文件 import Vue from vue import Vuex from "vuex" import tab from ./tab // 引入 modulesVue.use(Vuex) // 全局引入// 创建 Vuex 实例 export default new Vuex.Store({modules: …

iPaaS和RPA,企业自动化应该如何选择?

全球著名的咨询调查机构Gartner在2022年初再次发布了《2022年12大技术趋势》报告。 Gartner是全球最具权威的IT研究与顾问咨询公司&#xff0c;成立于1979年&#xff0c;在界定及分析那些决定了商业进程的发展趋势与技术方面&#xff0c;它拥有二十年以上的丰富经验&#xff0c…

uniapp-轮播图点击预览功能

实现效果 点击后打开预览图 实现代码 <swiper v-if"this.bannerList.length > 1" class"swiper" autoplay"true" duration"500" interval"2000" change"changeSwiper"><swiper-item class"swip…

解释pom中的依赖dependency

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency> 用上面这些来给大家举例哈 这段代码是 Maven 或者 Gradle 项目中的依赖声明&#xff0c;用于引入 Spr…

微分方程,含矩阵的指数函数

d u d t A u \frac{du}{dt}Au dtdu​Au 解会长这样 u ( t ) c 1 e λ 1 t x 1 c 2 e λ 2 t x 2 . . . u(t)c_1e^{\lambda_1t}x_1c_2e^{\lambda_2t}x_2... u(t)c1​eλ1​tx1​c2​eλ2​tx2​... 因为 e λ t x e^{\lambda t}x eλtx的导数是 λ e λ t x \lambda e^{\l…

【算法日志】图论 并查集及其简单应用

【算法日志】图论: 并查集及其简单应用 并查集概论 并查集是一种算法设计思想&#xff0c;通过判断两个元素是否在同一个集合里&#xff0c;常用来解决一些和图相关的连通性问题。 并查集主要有以下两个功能&#xff1a; 将两个元素添加到一个集合中。判断两个元素是否是在…

代码模版-实现重置按钮清空表单数据,vue+elementUI

文章目录 界面代码 界面 页面上可能会有「搜索」按钮 也会有「重置」按钮 重置 btn 的作用是为了清空前面 form 表单中的数据 代码 我们使用 elementUI vue 来做 解释&#xff1a;我们在 el-form 组件中加上 ref"searchFormRef"&#xff0c;后续 js 中通过 thi…

Web之JavaScript(jQuery)笔记

Web之HTML、CSS、JavaScript 三、JavaScriptJS调试变量自定义函数数据类型及转换运算符优先级内置函数数组事件DOM(Document Object Model 文档对象模型)jQuery Web之HTML笔记 Web之CSS笔记 三、JavaScript JavaScript&#xff08;简称“JS”&#xff09;是一种轻量级的面向对…

element-ui中怎样使用iconfont的图标

1 登录 https://www.iconfont.cn/ 2 搜索合适的图 这里可以找到这个图所在的图库。这样就可以一次查找到对应的所有同款图标 3 选择同款加入购物车 4 将购物车的icon加入项目&#xff0c;注意是新建项目&#xff0c;除非你是确定需要前面已经加过的icon 5 下载icon 选择fon…

CentOS7安装xvfb,解决服务器没有X-Server的问题

Linux服务器上一般没有图形界面,但是有时候有些软件又需要图形界面.比如oracle,自动化测试(puppeteer).运行的时候会提示没有没有X服务. 这时候一般不会去特地装图形界面.这个时候就要用xvfb来创建虚拟图形窗口. xvfb介绍 Xvfb(X Virtual Frame Buffer)是基于X Window的虚拟服…

麒麟系统安装找不到安装源!!!!设置基础软件仓库时出错

记录--华为RH2288 V3服务器安装麒麟系统遇到的问题 1.遇到的问题--“设置基础软件仓库时出错”报错导致无法继续安装 没办法下一步 先说结论&#xff1a;系统bug 该问题在CentOS、Rocky Linux最新版中均存在 解决&#xff1a; &#xff08;一&#xff09;、如果是外网直接配…

github 开源whisper ros llm

GitHub - openai/whisper: Robust Speech Recognition via Large-Scale Weak Supervision openai whisper ROS LLM https://github.com/Auromix/ROS-LLM/tree/ros2-humble/llm_input

c# 设计一个图书管理系统

设计一个简单的图书管理系统&#xff0c;包括以下类&#xff1a; 1、Book 类&#xff1a;表示一本图书&#xff0c;包括图书编号、书名、作者、出版日期等属性。 2、Library 类&#xff1a;表示图书馆&#xff0c;包括一个图书列表&#xff0c;可以添加图书、借出图书、归还图…

PHP字符串函数的解析

在PHP中&#xff0c;字符串是一种常见的数据类型&#xff0c;用于存储和操作文本数据。PHP提供了丰富的字符串函数&#xff0c;用于执行各种字符串操作&#xff0c;包括截取、连接、替换、搜索等。在这篇文章中&#xff0c;我们将深入解析一些常用的PHP字符串函数&#xff0c;以…

京东API接口获取京东平台商品详情数据,SKU,价格参数及其返回值说明

做过淘客开发的一定接触过淘宝API开发。 而做京东联盟软件自然离不开京东联盟API。 京东联盟API目前上线的有很多。 参数说明 通用参数说明 url说明 https://api-gw.onebound.cn/平台/API类型/ 平台&#xff1a;淘宝&#xff0c;京东等&#xff0c; API类型:[item_search,ite…

docker 部署mysql主从复制

一&#xff1a;环境准备 1&#xff1a;创建mysql主库镜像 docker run -p 3307:3306 --name mysql_m \ -v /opt/mysql_m/log:/var/log/mysql \ -v /opt/mysql_m/data:/var/lib/mysql \ -v /opt/mysql_m/conf:/etc/mysql \ -e MYSQL_ROOT_PASSWORD123456 \ -d mysql:5.7 2&…

什么是统一数据存储?

什么是统一数据存储&#xff1f; 二十多年前&#xff0c;NetApp 在业内推出了统一存储。如今&#xff0c;NetApp 已将统一数据存储的定义扩展到一个完整的生态系统&#xff0c;该生态系统支持在一个通用操作系统中处理文件、块和对象工作负载&#xff0c;而该操作系统横跨多个…

【揭秘】MySQL逻辑架构:一文带你全面了解!

mysql是我们开发过程中使用的最多的数据库&#xff0c;大多数程序员平时都是做CRUD&#xff0c;如果CRUD慢了&#xff0c;那就再加一个索引&#xff0c;如果加上索引还不行&#xff0c;那基本上开发就没辙了&#xff0c;因为对mysql内部理解不深入、不清晰&#xff0c;所以问题…