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,一经查实,立即删除!

相关文章

【docker】docker build上下文

什么是 Docker Build 上下文&#xff1f; 在 Docker 中&#xff0c;构建上下文&#xff08;Build Context&#xff09; 是指在执行 docker build 命令时&#xff0c;Docker 会发送给 Docker 引擎的所有文件和目录的集合。构建上下文包含了 Dockerfile 和用于构建镜像的所有文件…

[在线实验]-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…

M31系列LoRa分布式IO模块功能简介

M31系列LoRa 分布式 IO 模块简介 M31系列LoRa分布式IO主机模块是一款强大的无线远程控制与采集设备&#xff0c;该设备采用 LoRa 无线技术&#xff08;内置了无线模块&#xff09;&#xff0c;可通过串口或远程 LoRa 组网设备发送 Modbus RTU 指令进行控制&#xff0c;可搭配E…

在 Ubuntu 系统中设置静态 IP 地址,解决重启地址丢失问题

在 Ubuntu 系统中设置静态 IP 地址&#xff0c;可以通过修改网络配置文件来实现。以下是具体步骤&#xff1a; 使用 netplan 配置&#xff08;Ubuntu 18.04 及以上版本&#xff09; 打开配置文件&#xff1a; netplan 的配置文件通常位于 /etc/netplan/ 目录下&#xff0c;文件…

【深度学习】服务器常见命令

1、虚拟环境的安装位置 先进入虚拟环境 which python2、升序查看文件内容 ls -ltr3、查看服务器主机空间使用情况 df -hdf -h .4、查看本地空间使用情况 du -sh ./*du -sh * | sort -nr5、查找并删除进程 # 查找 ps aux# 删除 kill -KILL pid6、查看服务器配置 lscpuuna…

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…

Spring事务管理学习记录

一、概念 事务&#xff08;Transaction&#xff09;是指一组操作的集合&#xff0c;这些操作要么全部成功&#xff0c;要么全部失败。事务的四大特性&#xff08;ACID&#xff09;确保了数据的完整性和一致性&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a…

长城上,低空下,北京联通点亮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 请求并返…

阅读方法论

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