vue3中element Plus插槽

发布于:2024-05-06 ⋅ 阅读:(28) ⋅ 点赞:(0)
                <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); // 打印当前行的数据  

}