SoFunction
Updated on 2025-04-05

Detailed explanation of the element Plus slot example in vue3

The element Plus slot in vue3, the implementation code is as follows:

                <el-table-column property="" label="operate" width="200" show-overflow-tooltip>
                    <template #default="scope">
                        <span @click="handleSimilarQuestion()">Similar questions</span>
                        <span @click="handleEdit()">edit</span>
                        <!-- <span @click="printRow()">delete</span> -->
                        <!-- Slot titleRemember to add： -->
                        <el-popconfirm :title="`确认delete:  ${questionNum}  ?`" width="200" @confirm="confirmEvent"
                            @cancel="cancelEvent" confirm-button-text="confirm" cancel-button-text="Cancel">
                            <template #reference>
                                <span @click="printRow()">delete</span>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>

js

// Q&A library Delete functionslet questionNum = ref('')
function printRow(row: any) {
    // (); // Print the data of the current line     = 
    // ()
}
const confirmEvent = () => {
    ('Confirm Delete')
}
const cancelEvent = () => {
    ('Undelete')
}
// Similar questionsfunction handleSimilarQuestion(row:any) {  
    (row);  
}  
// editfunction handleEdit(row:any) {  
    (row); 
}

#default="scope"Define a name calleddefaultthe slot andData of the current rowPass to a name calledscopevariables.

<template #default="scope">

@click="printRow()"is an event listener, which will be in<span>Called when the element is clickedprintRowfunction and(i.e., the data of the current row) is passed as a parameter.

&lt;span @click="printRow()"&gt;delete&lt;/span&gt;

When the function is called, it will be usedReplace parametersrowThe contents of   are printed to the browser's console.

function printRow(row: any) {
(); // Print the data of the current line}

This is the end of this article about element Plus slots in vue3. For more related contents of vue3 element Plus slots, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!