vue3中element Plus插槽

                <el-table-column property="" label="操作" width="200" show-overflow-tooltip>

                    <template #default="scope">
                        <span @click="handleSimilarQuestion(scope.row)">相似问</span>
                        
                        <span @click="handleEdit(scope.row)">编辑</span>
                        <!-- <span @click="printRow(scope.row)">删除</span> -->


                        <!-- 插槽 title记得加: -->
                        <el-popconfirm :title="`确认删除:  ${questionNum}  ?`" width="200" @confirm="confirmEvent"
                            @cancel="cancelEvent" confirm-button-text="确认" cancel-button-text="取消">
                            <template #reference>
                                <span @click="printRow(scope.row)">删除</span>
                            </template>
                        </el-popconfirm>

                    </template>

                </el-table-column>

js


// 问答库  删除函数
let questionNum = ref('')

function printRow(row: any) {
    // console.log(row.question); // 打印当前行的数据  
    questionNum.value = row.question
    // console.log(questionNum.value)
}
const confirmEvent = () => {
    console.log('确认删除')
}
const cancelEvent = () => {
    console.log('取消删除')
}

// 相似问
function handleSimilarQuestion(row:any) {  
    console.log(row);  
   
}  

// 编辑
function handleEdit(row:any) {  
    console.log(row); 
    
}  
  • #default="scope" 定义了一个名为 default 的插槽,并将当前行的数据传递给一个名为 scope 的变量。

<template #default="scope">

  • @click="printRow(scope.row)" 是一个事件监听器,它会在该 <span> 元素被点击时调用 printRow 函数,并将 scope.row(即当前行的数据)作为参数传递。

<span @click="printRow(scope.row)">删除</span>

  • 当该函数被调用时,会使用 console.log 将参数 row 的内容打印到浏览器的控制台。

function printRow(row: any) {

console.log(row.question); // 打印当前行的数据  

}

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

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

相关文章

unaipp推荐算法的汽车租赁系统zaxzu 微信小程序hbuiderx

随着现代汽车租赁管理的快速发展&#xff0c;可以说汽车租赁管理已经逐渐成为现代汽车租赁管理过程中最为重要的部分之一。但是一直以来我国传统的汽车租赁管理并没有建立一套完善的行之有效的汽车租赁管理系统&#xff0c;传统的汽车租赁管理已经无法适应高速发展&#xff0c;…

Django中如何让页面之间建立关系

今天给大家讲解两种让页面建立联系的方式 一、重定向 二、表单提交 先看第一种方式&#xff0c;重定向 首先需要了解客户端发起请求的过程 1、客户端向服务端发起请求,比如请求地址是&#xff1a;http://127.0.0.1:8000/lili/submit/ 2、程序根据路由找到视图函数 3、执行视…

从一到无穷大 #26 Velox:Meta用cpp实现的大一统模块化执行引擎

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言业务案例PrestoSparkXStreamDistributed messaging systemData IngestionData Pr…

ES集群数据备份与迁移

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、文章涉及概念讲解二、操作步骤1.创建 snapshot repository操作主机hadoop1分别操作从机hadoop2和hadoop3 2. 查看仓库信息3. 备份索引&#xff0c;生成快照…

电商中文场景多模态测试prompt

魔搭社区汇聚各领域最先进的机器学习模型&#xff0c;提供模型探索体验、推理、训练、部署和应用的一站式服务。https://www.modelscope.cn/datasets 多模态大模型Yi-VL-plus体验 效果很棒 - 知乎最近测了一下零一万物的多模态大模型Yi-VL-plus的效果&#xff0c;发现多模态理解…

【hive】transform脚本

文档地址&#xff1a;https://cwiki.apache.org/confluence/display/Hive/LanguageManualTransform 一、介绍二、实现1.脚本上传到本地2.脚本上传到hdfs 三、几个需要注意的点1.脚本名不要写全路径2.using后面语句中&#xff0c;带不带"python"的问题3.py脚本Shebang…

Nginx(搭建高可用集群)

文章目录 1.基本介绍1.在微服务架构中的位置2.配置前提3.主从模式架构图 2.启动主Nginx和两个Tomcat1.启动linux的tomcat2.启动win的tomcat3.启动主Nginx&#xff0c;进入安装目录 ./sbin/nginx -c nginx.conf4.windows访问 http://look.sunxiansheng.cn:7777/search/cal.jsp 3…

基于 Dockerfile 部署nginx服务(实现HTTPS功能)

目录 前言 1、任务要求 2、建立工作目录并上传nginx安装包 3、创建自签名证书 4、创建 nginx Dockerfile 文件 5、准备并编写 nginx.conf 配置文件 6、准备nginx页面文件 7、工作目录文件结构 8、生成镜像 8、启动容器并开启宿主机端口映射 9、浏览器测试 前言 Ngi…

DS:顺序表、单链表的相关OJ题训练(1)

欢迎各位来到 Harper.Lee 的学习小世界&#xff01; 博主主页传送门&#xff1a;Harper.Lee的博客主页 想要一起进步的uu可以来后台找我交流哦&#xff01; 在DS&#xff1a;单链表的实现 和 DS&#xff1a;顺序表的实现这两篇文章中&#xff0c;我详细介绍了顺序表和单链表的…

CMakeLists.txt语法规则:foreach 循环基本用法

一. 简介 cmake 中除了 if 条件判断之外&#xff0c;还支持循环语句&#xff0c;包括 foreach()循环、while()循环。 本文学习 CMakeLists.txt语法中的循环语句。 CMakeLists.txt语法中 有两种 循环实现方式&#xff1a;foreach循环与 while循环。 二. CMakeLists.txt语法规则…

tomcat+maven+java+mysql图书管理系统1-配置项目环境

目录 一、软件版本 二、具体步骤 一、软件版本 idea2022.2.1 maven是idea自带不用另外下载 tomcat8.5.99 Javajdk17 二、具体步骤 1.新建项目 稍等一会&#xff0c;创建成功如下图所示&#xff0c;主要看左方目录相同不。 给maven配置国外镜像 在左上…

asp.net朱勇项目个人博客(3)

引文:按照书上的项目&#xff0c;我们最后实现管理端的三个增删改查的功能即可,相对与三个增删改查&#xff0c;文章&#xff0c;分类和留言&#xff0c;这里我们所需要用的的关联的一个表就是文章表&#xff0c;因为文章表每一个文章的增加显示和修改都需要对应的一个分类&…

Spring入门及注解开发

1 引言 自定义注解可以用来为代码添加元数据信息,简化配置,提高代码的可读性和可维护性。通过自定义注解,可以实现自定义的业务逻辑、约束条件、配置参数等功能。在Spring中,自定义注解常用于标记组件、配置依赖注入、AOP切面等。 自定义注解可以添加元数据信息,低代码框…

银行智能化数据安全分类分级实践分享

文章目录 前言一、数据安全智能分类分级平台建设背景二、数据安全分类分级建设思路和实践1、做标签– 数据安全标签体系2、打标签– 鹰眼智能打标平台 3.03、用标签– 全行统一“数据安全打标签结果”服务提供前言 随着国家对数据安全的高度重视,以及相关法律法规的出台,数据…

【linuxC语言】stat函数

文章目录 前言一、stat函数二、示例代码总结 前言 在Linux系统编程中&#xff0c;stat() 函数是一个非常重要的工具&#xff0c;用于获取文件的元数据信息。无论是在系统管理、文件处理还是应用开发中&#xff0c;都可能会用到 stat() 函数。通过调用 stat() 函数&#xff0c;…

ue引擎游戏开发笔记(31)——对角色移动进行优化:角色滑步处理

1.需求分析&#xff1a; 角色的移动与动画不匹配&#xff0c;角色移动起来像是在滑行。。。适当进行优化。 2.操作实现&#xff1a; 这个问题本质是角色的运动速度并没有匹配世界动画的运行速度&#xff0c;不论世界动画快慢于角色移动速度&#xff0c;都会感到有滑步感。所以…

基于 Spring Boot 博客系统开发(六)

基于 Spring Boot 博客系统开发&#xff08;六&#xff09; 本系统是简易的个人博客系统开发&#xff0c;为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。&#x1f33f;&#x1f33f;&#x1f33f; 基于 Spring Boot 博客系统开发&#xff08;五&#xff09;&#x1f…

适合打工人的赚钱软件有哪些?盘点5个实用的赚钱软件(真实靠谱)

在这个互联网时代&#xff0c;手机不仅仅是我们的通讯工具&#xff0c;更是我们赚钱的小助手。今天&#xff0c;就让我带你一探究竟&#xff0c;揭秘那些真实靠谱的赚钱软件&#xff0c;让你在家也能轻松赚钱&#xff01; 一、抖音极速版&#xff1a;刷视频也能赚钱 抖音极速版…

Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝

Flutter笔记 Widgets Easier组件库&#xff08;11&#xff09;使用提示吐丝 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this …

【前端学习——网络相关】浏览器同源策略和跨域

浏览器的同源策略 为什么要有&#xff1f; 帮助阻隔恶意文档&#xff0c;减少可能被攻击的媒介。&#xff08;就是为了安全&#xff09; 如果非同源&#xff0c;共有三种行为受到限制 &#xff08;1&#xff09; Cookie、LocalStorage 和 IndexDB 无法读取。 &#xff08;2…
最新文章