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.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss"></style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

键盘映射笔记

dumpkeys命令用于显示当前系统中定义的键盘映射表。它可以帮助用户查看和理解系统中的键盘布局和键盘映射规则。 当用户执行dumpkeys命令时&#xff0c;它会读取系统中的键盘映射表文件&#xff08;通常是/etc/keymaps或/etc/console/boottime.kmap.gz&#xff09;&#xff0c;…

麒麟KYLINOS2303系统上禁用新功能介绍页面

原文链接&#xff1a;麒麟KYLINOS2303系统上禁用新功能介绍页面 hello&#xff0c;大家好啊&#xff0c;今天给大家带来一篇在麒麟KYLINOS2303系统上禁用新功能介绍页面的文章&#xff0c;在我们安装完系统登录后&#xff0c;会发现有新功能介绍这个界面&#xff0c;我们可以通…

buildadmin+tp8表格操作(8) 表格下方添加 合计行

表格的下方可以自定义添加一个合计行&#xff0c;如果有其它的需求&#xff0c; 我们可以添加我们自已需要的行&#xff0c; 并不局限于合计行 以上就可以给表格的最下方添加一个合计行了 完整代码如下 <template><div class"default-main ba-table-box"&…

Blender烘焙AO操作及对应的python代码

&#xff08;一&#xff09;Blender软件操作 1. 导入模型&#xff08;这里省略&#xff09; 2. 材质设置 模型使用的所有材质都需要删除Surface Shader&#xff0c;没有其他多余的计算&#xff0c;可以大量缩短烘焙时间。删除之后的只留下一个材质输出节点&#xff0c;如图所…

Vatee万腾携手Wiki EXPO 2023悉尼峰会 共谱辉煌未来

悉尼&#xff0c;这座充满活力和创新的城市&#xff0c;即将成为全球商业的焦点。2023年11月16日&#xff0c;由WikiEXPO主办的Wiki Finance Expo Sydney 2023在悉尼马丁广场1号富丽敦酒店隆重开幕&#xff0c;这场金融博览会是澳大利亚今年规模最宏大、备受期待的金融科技盛会…

网上被吹爆的Spring Event事件订阅有缺陷,不要用

Spring Event事件订阅框架&#xff0c;被网上一些人快吹上天了&#xff0c;然而我们在新项目中引入后发现&#xff0c;这个框架缺陷很多&#xff0c;玩玩可以&#xff0c;千万不要再公司项目中使用。还不如自己手写一个监听者设计模式&#xff0c;那样更稳定、可靠。 之前我已…

电磁场与电磁波part5--均匀平面波在无界空间的传播

目录 1、相位速度 2、波阻抗 3、理想介质中均匀平面波的传播特点 4、色散现象 5、导电媒质中均匀平面波的传播特点 6、趋肤效应 7、电磁波的极化 1、相位速度 电磁波的等相位面在空间中的移动速度&#xff08;相速&#xff09; 在自由空间&#xff08;自由空间的光速&a…

UE5 - ArchvizExplorer - 数字孪生城市模板 - 功能修改

数字孪生项目&#xff0c;大多是双屏互动&#xff0c;而非下方菜单点击&#xff0c;所以要做一番改造 参考&#xff1a;https://blog.csdn.net/qq_17523181/article/details/133853099 1. 去掉提示框 打开BP_MasterMenu_Widget&#xff0c;进入EventGraph&#xff0c;断开Open…

仅需1分钟,搭建一个你自己的工具站

{alert type"info"} 站长工具在工作中应该会有很多人使用&#xff0c;比如说 JSON格式化&#xff0c;UUID生成器&#xff0c;密码生成、URL编码等 今天给大家分享一个英文版的IT-TOOL的搭建教程。 是个开源的项目&#xff0c;地址&#xff1a;https://github.com/Cor…

JZM-D30室温探针台技术参数

概况&#xff1a; JZM-D30室温探针台的诸多设计都是专用的&#xff0c;探针台的配置主要是根据用户的需求进行选配及设计。例如&#xff0c;要求的磁场型号&#xff0c;电源型号&#xff0c;磁场值&#xff0c;样品台的尺寸等&#xff0c;除此之外&#xff0c;该探针台和我司自…

el-tree结合el-switch实现状态切换

<template><div><el-col :span"24"><el-card class"tree-card"><div class"sketch_content selectFile"><span class"span_title">组织列表 </span><div style"display: flex; jus…

【文末送书】计算机网络 | IO多路转接技术 | poll/epoll详解

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

DAY59 503.下一个更大元素II + 42. 接雨水

503.下一个更大元素II 题目要求&#xff1a; 给定一个循环数组&#xff08;最后一个元素的下一个元素是数组的第一个元素&#xff09;&#xff0c;输出每个元素的下一个更大元素。数字 x 的下一个更大的元素是按数组遍历顺序&#xff0c;这个数字之后的第一个比它更大的数&am…

DDD落地:从美团抽奖平台,看DDD在大厂如何落地?

尼恩说在前面 在40岁老架构师 尼恩的读者社区(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 谈谈你的DDD落地经验&#xff1f; 谈谈你对DDD的理解&#xff…

【深入Scrapy实战】从登录到数据解析构建完整爬虫流程

文章目录 1. 写在前面2. 抓包分析3. Scrapy提交登陆请求4. 列表与详情页面数据解析5. 中间件Middleware配置 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xf…

迈巴赫S480升级镀铬中网 480秒变680

迈巴赫S480的首选项目&#xff0c;就是前杠格栅升级了&#xff0c;只需要替换前杠下方的三个格栅中网&#xff0c;就可以直接升级成迈巴赫S680的外形&#xff0c;立马提升了两个档次。

SAP ABAP给指定用户增加SAP ALL权限

下面的例子是给指定用户增加SAP ALL的权限ABAP代码&#xff0c;增加指定权限对像的没研究&#xff0c;只能自己看了。这应该是SAP权限的无限破解了吧。 例子中SAP*,是当前系统中有SAP_ALL权限的一个用户&#xff0c;用来参考使用的&#xff0c;根据实际系统用的最大权限用户&a…

Sqlserver 多行合并为一行

多行合并为一行 表结构 子表结构如下&#xff1a; 父表结构如下&#xff1a; 由图可以看出子表和父表是通过父表ID进行关联的。 我们要实现的效果如下&#xff0c;查询父表数据的同时&#xff0c;增加一列来展示父表下子商品信息。 完整代码如下 select top {0} * from (…

不想花大价钱?这10款替代Axure的平替软件更划算!

Axure是许多产品经理和设计师进入快速原型设计的首选工具&#xff0c;但Axure的使用成本相对较高&#xff0c;学习曲线陡峭&#xff0c;许多设计师正在寻找可以取代Axure的原型设计工具&#xff0c;虽然现在有很多可选的设计工具&#xff0c;但质量不均匀&#xff0c;可以取代A…

壹基金为爱同行走进绿水青山,为乡村儿童送去健康水

壹基金为爱同行公益践行活动发起于2013年,截至2022年底,累计有63,319名线下参与队员,走过了8个城市。2023年,为爱同行的“壹家人”再次出发,走进“绿水青山就是金山银山”理念诞生地——浙江安吉余村,徒步18公里,为乡村儿童喝上足量、干净的饮用水筹集善款。本次活动获得了当地…