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
在这里插入图片描述

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

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

相关文章

第一个 C++ 程序 001

1. main 函数 同 c 语言的 main 函数 2. 字符和字符串 在C的 STL 中⼜引⼊了 string 来表⽰字符串&#xff0c;功能更加强⼤&#xff0c;C 语⾔不⽀持&#xff0c;后期会详细介绍。 其他的和 c 语言类似 3. 头文件 和 C 语言中的头文件一样&#xff0c;相当于一个工具箱 不过…

修改插槽样式,el-input 插槽 append 的样式

需缩少插槽 append 的 宽度 方法1、使用内联样式直接修改&#xff0c;指定 width 为 30px <el-input v-model"props.applyBasicInfo.outerApplyId" :disabled"props.operateCommandType input-modify"><template #append><el-button click…

Hot100 - 搜索二维矩阵II

Hot100 - 搜索二维矩阵II 最佳思路&#xff1a; 利用矩阵的特性&#xff0c;针对搜索操作可以从右上角或者左下角开始。通过判断当前位置的元素与目标值的关系&#xff0c;逐步缩小搜索范围&#xff0c;从而达到较高的效率。 从右上角开始&#xff1a;假设矩阵是升序排列的&a…

杂七杂八的网络安全知识

一、信息安全概述# 1.信息与信息安全# 信息与信息技术 信息奠基人&#xff1a;香农&#xff1a;信息是用来消除随机不确定性的东西 信息的定义&#xff1a;信息是有意义的数据&#xff0c;是一种要适当保护的资产。数据经过加工处理之后&#xff0c;就成为信息。而信息需要…

Vision Transformer(vit)的Embedding层结构

代码&#xff1a; class PatchEmbed(nn.Module):"""2D Image to Patch Embedding"""def __init__(self, img_size224, patch_size16, in_c3, embed_dim768, norm_layerNone):super().__init__()img_size (img_size, img_size) #图像尺寸默认22…

Spring Boot 实战:基于 Validation 注解实现分层数据校验与校验异常拦截器统一返回处理

1. 概述 本文介绍了在spring boot框架下&#xff0c;使用validation数据校验注解&#xff0c;针对不同请求链接的前端传参数据&#xff0c;进行分层视图对象的校验&#xff0c;并通过配置全局异常处理器捕获传参校验失败异常&#xff0c;自动返回校验出错的异常数据。 2. 依赖…

Linux查看网络基础命令

文章目录 Linux网络基础命令1. ifconfig 和 ip一、ifconfig命令二、ip命令 2. ss命令一、基本用法二、常用选项三、输出信息四、使用示例 3. sar 命令一、使用sar查看网络使用情况 4. ping 命令一、基本用法二、常用选项三、输出结果四、使用示例 Linux网络基础命令 1. ifconf…

Python酷库之旅-第三方库Pandas(245)

目录 一、用法精讲 1156、pandas.tseries.offsets.MonthEnd.is_month_start方法 1156-1、语法 1156-2、参数 1156-3、功能 1156-4、返回值 1156-5、说明 1156-6、用法 1156-6-1、数据准备 1156-6-2、代码示例 1156-6-3、结果输出 1157、pandas.tseries.offsets.Mon…

DAMODEL丹摩|Faster-Rcnn训练与部署实战

本文仅做测评体验&#xff0c;非广告。 文章目录 1. 丹摩介绍2. Faster-Rcnn介绍3. 准备3. 1 丹摩平台准备实例 3. 2 Faster-Rcnn4. 部署开始5. 训练5. 资源释放6. 结语 1. 丹摩介绍 详细介绍请看&#xff1a;丹摩平台介绍。 丹摩智算平台&#xff08;DAMODEL&#xff09;是…

NLP信息抽取大总结:三大任务(带Prompt模板)

信息抽取大总结 1.NLP的信息抽取的本质&#xff1f;2.信息抽取三大任务&#xff1f;3.开放域VS限定域4.信息抽取三大范式&#xff1f;范式一&#xff1a;基于自定义规则抽取&#xff08;2018年前&#xff09;范式二&#xff1a;基于Bert下游任务建模抽取&#xff08;2018年后&a…

LLM*:路径规划的大型语言模型增强增量启发式搜索

路径规划是机器人技术和自主导航中的一个基本科学问题&#xff0c;需要从起点到目的地推导出有效的路线&#xff0c;同时避开障碍物。A* 及其变体等传统算法能够确保路径有效性&#xff0c;但随着状态空间的增长&#xff0c;计算和内存效率会严重降低。相反&#xff0c;大型语言…

C#基础题总结

16.一张单据上有一个5位数的号码为6**42&#xff0c;其中百位数和千位数已模糊不清&#xff0c;但知道该数能被 57 和 67 除尽。设计一个算法&#xff0c;找出该单据所有可能的号码。 17.编程序求2&#xff5e;10000以内的完全数。一个数的因子&#xff08;除了这个数本身&…

Android数据存储——文件存储、SharedPreferences、SQLite、Litepal

数据存储全方案——详解持久化技术 Android系统中主要提供了3中方式用于简单地实现数据持久化功能&#xff0c;即文件存储、SharedPreference存储以及数据库存储。除了这三种方式外&#xff0c;还可以将数据保存在手机的SD卡中&#xff0c;不给使用文件、SharedPreference或者…

【动手学电机驱动】STM32-FOC(8)MCSDK Profiler 电机参数辨识

STM32-FOC&#xff08;1&#xff09;STM32 电机控制的软件开发环境 STM32-FOC&#xff08;2&#xff09;STM32 导入和创建项目 STM32-FOC&#xff08;3&#xff09;STM32 三路互补 PWM 输出 STM32-FOC&#xff08;4&#xff09;IHM03 电机控制套件介绍 STM32-FOC&#xff08;5&…

ubuntu 安装proxychains

在Ubuntu上安装Proxychains&#xff0c;你可以按照以下步骤操作&#xff1a; 1、更新列表 sudo apt-update 2、安装Proxychains sudo apt-get install proxychains 3、安装完成后&#xff0c;你可以通过编辑/etc/proxychains.conf文件来配置代理规则 以下是一个简单的配置示例&…

ZooKeeper 基础知识总结

先赞后看&#xff0c;Java进阶一大半 ZooKeeper 官网这样介绍道&#xff1a;ZooKeeper 是一种集中式服务&#xff0c;用于维护配置信息、命名、提供分布式同步和提供组服务。 各位hao&#xff0c;我是南哥&#xff0c;相信对你通关面试、拿下Offer有所帮助。 ⭐⭐⭐一份南哥编写…

visionpro官方示例分析(一) 模板匹配工具 缺陷检测工具

1.需求&#xff1a;找出图像中的这个图形。 2.步骤 使用CogPMAlignTool工具&#xff0c;该工具是模板匹配工具&#xff0c;见名知意&#xff0c;所谓模板匹配工具就是说先使用该工具对一张图像建立模板&#xff0c;然后用这个模板在其他图像上进行匹配&#xff0c;匹配上了就说…

代码随想录算法训练营第六十天|Day60 图论

Bellman_ford 队列优化算法&#xff08;又名SPFA&#xff09; https://www.programmercarl.com/kamacoder/0094.%E5%9F%8E%E5%B8%82%E9%97%B4%E8%B4%A7%E7%89%A9%E8%BF%90%E8%BE%93I-SPFA.html 本题我们来系统讲解 Bellman_ford 队列优化算法 &#xff0c;也叫SPFA算法&#xf…

LAMP环境的部署

一、软件安装介绍 在Linux系统中安装软件有rpm安装、yum安装、源码安装等方法&#xff0c;在这里主要给大家介绍 yum 安装&#xff0c;这是一种最简单方便的一种安装方法。 YUM&#xff08;Yellow dog Upadate Modifie&#xff09;是改进版的 RPM 管理器&#xff0c;很好地解…

搭建文件服务器并使用Qt实现文件上传和下载(带账号和密码)

文章目录 0 背景1 搭建文件服务器2 代码实现文件上传和下载2.1 在pro文件中添加网络支持2.2 创建网络管理类2.3 文件上传2.4 文件下载 3 扩展&#xff08;其他方法实现文件上传和下载&#xff09;3.1 python3.2 npm3.3 ftp服务器 4 完整的代码 0 背景 因为需要使程序具备在远程…