layui-vue第三方库表格列事件怎么写

插槽写入列点击事件

  <div class="le-table-box" ref="TableBoxRef" :style="{ height: ShowPage ? 'calc(100% - 60px)' : '100%' }"><lay-table @row-double="dbRowClick" :columns="TableColumn" :data-source="TableData" :max-height="tableHeight":rowClassName="RowClassChange" :id="CheckKey" v-model:[TableType]="SelectedKey" @on-select="handleSelect"@row="rowClick" ref="LayTableRef" v-bind="TableConfig"><!-- 通过自定传入插槽实现 --><template #date="{ row, column }"> <span>{{ formatterDate(row[column.key]) }}</span></template><template #image="{ row, column }"><img :src="row[column.key]" alt="" srcset="" @error="imgLoadError"></template><template v-slot:operator="{ row, rowIndex }"><slot name="Controls" :index="rowIndex" :row="row" /></template><template #cell="{ row, column }"> <span @dblclick="dblclickColumnFun(row, column, row[column.key])">{{ row[column.key] }}</span></template></lay-table><div v-if="IsSwitchObj.isShow && TableData.length" class="switch-btn-group":style="{ right: switchRight, top: switchTop }" @click="switchBtnClick"><img v-show="!switchRight" src="@/assets/nav_icon/switch-left.png" alt srcset /><img v-show="switchRight" src="@/assets/nav_icon/switch-right.png" alt srcset /></div></div>
const dblclickColumnFun = (row, column, key) => {emit("DblclickColumEmit", row, column, key);
}
const tableColumn = ref([{title: "点位名称",key: "name",width: "120px",align: "center",ellipsisTooltip: true, // 内容超出隐藏},{title: "编号",key: "indexCode",width: "180px",align: "center",ellipsisTooltip: true,},{title: "违规数",key: "num",width: "180px",align: "center",ellipsisTooltip: true,customSlot:'cell',}, {title: "审核流转数",key: "liuzhuan",width: "180px",align: "center",ellipsisTooltip: true,customSlot:'cell',},{title: "利用率",key: "liyl",width: "180px",align: "center",ellipsisTooltip: true,}
])

row
在这里插入图片描述column
在这里插入图片描述

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

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

相关文章

[在线实验]-Redis Docker镜像的下载与部署

镜像下载 dockerredis镜像资源-CSDN文库 加载镜像 使用以下命令从redis.tar文件中加载Docker镜像 docker load --input redis.tar 创建映射目录 为了确保Redis的数据能够持久化&#xff0c;我们需要创建一个本地目录来存储这些数据 mkdir -p datasource/docker/redis 运…

Flink CDC 使用实践以及遇到的问题

背景 最近公司在做一些业务上的架构调整&#xff0c;有一部分是数据从mysql采集到Starrocks&#xff0c;之前的一套方法是走 debezium 到 puslar 到 starrocks,这一套下来比较需要配置很多东西&#xff0c;而且出现问题以后&#xff0c;需要修改很多配置&#xff0c;而且现阶段…

配置idea环境进行scala编程

这里用的jdk是jdk-8u161,scala版本是2.12.0 在d盘新建一个本地仓库用来存放下载的maven包&#xff0c;在里面创建如下两个文件 更改settings文件为下面的样子 点击左下角的设置&#xff0c;更改maven本地仓库的位置&#xff08;默认在c盘用户目录下的.m2文件中&#xff0c;更改…

0017. shell命令--tac

目录 17. shell命令--tac 功能说明 语法格式 选项说明 实践操作 注意事项 17. shell命令--tac 功能说明 Linux 的 tac 命令用于按行反向输出文件内容&#xff0c;与 cat 命令的输出顺序相反。非常有趣&#xff0c;好记。也就是说&#xff0c;当我们使用tac命令查看文件内…

mimic插件使用

最近搞机械臂的末端夹具&#xff0c;本来想用吸盘的插件的&#xff0c;不知道为什么吸盘吸不起来可乐瓶&#xff0c;后面就换成夹爪了。 因为原厂的urdf文件中提供夹爪是用mimic标签控制剩下的5个joint关节的&#xff0c;网上参考的资料太少了&#xff0c;也是废了好多力 气&am…

Spring boot之BeanDefinition介绍

在spring框架中IOC容器进行bean的创建和管理。Bean的创建是一个比较复杂的过程&#xff0c;它并不像我们创建对象一样只是直接new一下就行&#xff0c;虽然有些bean确实就是New一下。但在Spring中可以通过一些途径对bean进行增强扩展。在这个过程中&#xff0c;BeanDefinition作…

redis基础spark操作redis

Redis内存淘汰策略 将Redis用作缓存时&#xff0c;如果内存空间用满&#xff0c;就会自动驱逐老的数据。 为什么要使用内存淘汰策略呢&#xff1f; 当海量数据涌入redis&#xff0c;导致redis装不下了咋办&#xff0c;我们需要根据redis的内存淘汰策略&#xff0c;淘汰一些不那…

【MyBatis】验证多级缓存及 Cache Aside 模式的应用

文章目录 前言1. 多级缓存的概念1.1 CPU 多级缓存1.2 MyBatis 多级缓存 2. MyBatis 本地缓存3. MyBatis 全局缓存3.1 MyBatis 全局缓存过期算法3.2 CacheAside 模式 后记MyBatis 提供了缓存切口&#xff0c; 采用 Redis 会引入什么问题&#xff1f;万一遇到需强一致场景&#x…

力扣--LCR 150.彩灯装饰记录II

题目 代码 if(root null){ return new ArrayList<>(); } Queue<TreeNode> queue new LinkedList<>();List<List<Integer>> res new ArrayList<>();queue.add(root);while(!queue.isEmpty()){int k queue.size();List<Integer> …

RFdiffusion Potential类解读

1. Potential 类 功能 Potential 是一个接口类(抽象类),用于定义潜在函数的接口,要求继承它的类必须实现 compute 方法。它的设计遵循 面向对象编程的多态性原则,通过抽象接口确保子类实现特定功能,同时定义了一个通用的 API(即 compute 方法)。源代码: class Poten…

一款.NET开源的Windows资源管理器标签页工具

前言 今天大姚给大家分享一款基于.NET开发的可以让你在Windows资源管理器中使用Tab多标签功能的小工具&#xff1a;QTTabBar。 工具介绍 QTTabBar是一款基于.NET开发的可以让你在Windows资源管理器中使用Tab多标签功能的小工具。从此以后工作时不再遍布文件夹窗口&#xff0c…

PVE中VLAN的设置要点

使用这个拓扑进行连接无法直接访问PVE PVE 是这样设置如下&#xff1a; 核心重点&#xff1a;PVE 的 vmbr0 接口直接绑定了 enp2s0&#xff0c;这会导致 VLAN 流量无法正确处理&#xff0c;因为 PVE 没有专门为 VLAN 3 配置接口。 1.vmbr0 和 vmbr0.3 都是绑定在物理接口 enp2…

长城上,低空下,北京联通点亮5G-A的时代星光

2024年&#xff0c;被认为是5G-A的商用元年。在这个关键节点&#xff0c;大部分普通人最关心的问题可能是5G-A的引入、网络能力的提升&#xff0c;究竟能给我们带来哪些实用价值&#xff1f;在城市中到底有什么应用场景&#xff1f; 面对上述大众关切的问题&#xff0c;首善之都…

Vue使用Mockjs插件实现模拟数据

官方文档&#xff1a;Mock.js 一.引言 在前端开发过程中&#xff0c;我们经常会遇到后端接口尚未完成&#xff0c;但前端需要进行页面构建和功能测试的情况。这时候&#xff0c;Mockjs就如同救星一般出现了。Mockjs 是一款能够模拟生成随机数据&#xff0c;拦截 Ajax 请求并返…

阅读方法论

选择固有缺陷,选项是对比出来的

芯片测试-smith圆图

smith圆图 &#x1f4a2;smith圆图的故事&#x1f4a2;&#x1f4a2;smith圆图中的各部分来历&#x1f4a2;&#x1f4a2;公式推导&#x1f4a2;&#x1f4a2;等电阻圆特点&#x1f4a2;&#x1f4a2;等电抗圆&#x1f4a2;&#x1f4a2;等电抗圆特点&#x1f4a2; &#x1f4a…

聚云科技×亚马逊云科技:打通生成式AI落地最后一公里

云计算时代&#xff0c;MSP&#xff08;云管理服务提供商&#xff09;犹如一个帮助企业上云、用云、管理云的专业管家&#xff0c;在云计算厂商与企业之间扮演桥梁的作用。生成式AI浪潮的到来&#xff0c;也为MSP带来全新的生态价值和发展空间。 作为国内领先的云管理服务提供…

树莓派/Jetson Nano/...aarch64:安装Miniforge 或 Mambaforge

目录 一、下载链接&#xff08;我以miniforge为例&#xff09;二、赋予脚本可执行权限三、运行安装脚本四、添加环境变量 Miniforge 或 Mambaforge是Miniforge 项目提供了针对多种架构&#xff08;包括 aarch64&#xff09;的轻量级 Conda 发行版&#xff0c;它们是 Miniconda …

白嫖域名,无套路,无需手机注册,支持A解析,TXT解析

注册简单&#xff0c;连邮箱都不需要&#xff0c;不用填写任何资料。 支持A、redirectURL、AAAA、TXT等类型的记录&#xff0c;可以创建子域名 注册地址&#xff1a;Free DDNS 打开首页&#xff0c;输入想要的域名&#xff0c;点查询按钮。如果可用&#xff0c;再点击提交按钮…

SQL进阶技巧:非等值连接--单向近距离匹配

目录 0 场景描述 1 数据准备 2 问题分析 ​编辑 ​编辑 3 小结 数字化建设通关指南 0 场景描述 表 t_1 和表 t_2 通过 a 和 b 关联时&#xff0c;有相等的取相等的值匹配&#xff0c;不相等时每一 个 a 的值在 b 中找差值最小的来匹。 表 t_1&#xff1a;a 中无重复值…