vue3中element Plus插槽示例詳解
更新時間：2024年05月06日 09:44:55 作者：HWL5679
這篇文章主要介紹了vue3中element Plus插槽,#default=scope定義了一個名為 default 的插槽,并將當(dāng)前行的數(shù)據(jù)傳遞給一個名為 scope 的變量,本文結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
vue3中element Plus插槽，實現(xiàn)代碼如下所示：
<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="`確認(rèn)刪除: ${questionNum} ?`" width="200" @confirm="confirmEvent"
@cancel="cancelEvent" confirm-button-text="確認(rèn)" cancel-button-text="取消">
<template #reference>
<span @click="printRow(scope.row)">刪除</span>
</template>
</el-popconfirm>
</template>
</el-table-column>js
// 問答庫 刪除函數(shù)
let questionNum = ref('')
function printRow(row: any) {
// console.log(row.question); // 打印當(dāng)前行的數(shù)據(jù)
questionNum.value = row.question
// console.log(questionNum.value)
}
const confirmEvent = () => {
console.log('確認(rèn)刪除')
}
const cancelEvent = () => {
console.log('取消刪除')
}
// 相似問
function handleSimilarQuestion(row:any) {
console.log(row);
}
// 編輯
function handleEdit(row:any) {
console.log(row);
} #default="scope" 定義了一個名為 default 的插槽，并將當(dāng)前行的數(shù)據(jù)傳遞給一個名為 scope 的變量。
<template #default="scope">
@click="printRow(scope.row)" 是一個事件監(jiān)聽器，它會在該 <span> 元素被點擊時調(diào)用 printRow 函數(shù)，并將 scope.row（即當(dāng)前行的數(shù)據(jù)）作為參數(shù)傳遞。
<span @click="printRow(scope.row)">刪除</span>
當(dāng)該函數(shù)被調(diào)用時，會使用 console.log 將參數(shù) row 的內(nèi)容打印到瀏覽器的控制臺。
function printRow(row: any) {
console.log(row.question); // 打印當(dāng)前行的數(shù)據(jù)
}到此這篇關(guān)于vue3中element Plus插槽的文章就介紹到這了,更多相關(guān)vue3 element Plus插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuex 如何動態(tài)引入 store modules
這篇文章主要介紹了vuex 如何動態(tài)引入 store modules，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
滑塊驗證是比較常見的人機(jī)鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗證，具有一定的參考價值，感興趣的可以了解一下2022-01-01
vue前端測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
使用Vue.$set()或者Object.assign()修改對象新增響應(yīng)式屬性的方法
vue代碼中,只要在data對象里定義的對象,賦值后,任意一個屬性值發(fā)生變化，視圖都會實時變化，這篇文章主要介紹了使用Vue.$set()或者Object.assign()修改對象新增響應(yīng)式屬性,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了使用vscode快速建立vue模板過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
keepalive?是?Vue?內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染，也就是所謂的組件緩存，這篇文章主要介紹了說說你對Vue的keep-alive的理解,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue使用Sass時報錯問題的解決方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
vue store之狀態(tài)管理模式的詳細(xì)介紹
這篇文章主要介紹了vue store之狀態(tài)管理模式的詳細(xì)介紹，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08