vue3中element Plus插槽示例详解
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); // 打印当前行的数据 }
到此这篇关于vue3中element Plus插槽的文章就介绍到这了,更多相关vue3 element Plus插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)
最近在项目中要做一个pdf在线预览的功能,索性给大家整理个全面的,这篇文章主要给大家介绍了关于vue项目中常见的三种文件类型在线预览实现的相关资料,文件类型分别是pdf/word文件/excel表格,需要的朋友可以参考下2022-05-05vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
今天小编就为大家分享一篇vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08vue2中的el-select组件数据太多,如何实现滚动加载数据效果
这篇文章主要介绍了vue2中的el-select组件数据太多,如何实现滚动加载数据效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04vue封装全局弹窗警告组件this.$message.success问题
这篇文章主要介绍了vue封装全局弹窗警告组件this.$message.success问题,具有很的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
最新评论