vue3中element Plus插槽示例详解
作者：HWL5679
这篇文章主要介绍了vue3中element Plus插槽,#default=scope定义了一个名为 default 的插槽,并将当前行的数据传递给一个名为 scope 的变量,本文结合示例代码介绍的非常详细,需要的朋友可以参考下
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插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！