vue3中element Plus插槽示例詳解
vue3中element Plus插槽,實(shí)現(xiàn)代碼如下所示:
<el-table-column property="" label="操作" width="200" show-overflow-tooltip>
<template #default="scope">
<span @click="handleSimilarQuestion(scope.row)">相似問(wèn)</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
// 問(wèn)答庫(kù) 刪除函數(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('取消刪除')
}
// 相似問(wèn)
function handleSimilarQuestion(row:any) {
console.log(row);
}
// 編輯
function handleEdit(row:any) {
console.log(row);
} #default="scope" 定義了一個(gè)名為 default 的插槽,并將當(dāng)前行的數(shù)據(jù)傳遞給一個(gè)名為 scope 的變量。
<template #default="scope">
@click="printRow(scope.row)" 是一個(gè)事件監(jiān)聽(tīng)器,它會(huì)在該 <span> 元素被點(diǎn)擊時(shí)調(diào)用 printRow 函數(shù),并將 scope.row(即當(dāng)前行的數(shù)據(jù))作為參數(shù)傳遞。
<span @click="printRow(scope.row)">刪除</span>
當(dāng)該函數(shù)被調(diào)用時(shí),會(huì)使用 console.log 將參數(shù) row 的內(nèi)容打印到瀏覽器的控制臺(tá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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)現(xiàn)簡(jiǎn)單基礎(chǔ)的圖片裁剪功能
這篇文章主要為大家詳細(xì)介紹了如何利用Vue2實(shí)現(xiàn)簡(jiǎn)單基礎(chǔ)的圖片裁剪功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2022-09-09
自定義input組件如何實(shí)現(xiàn)拖拽文件上傳
這篇文章主要介紹了自定義input組件如何實(shí)現(xiàn)拖拽文件上傳問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問(wèn)題
本篇文章主要介紹了vue2.x中請(qǐng)求之前數(shù)據(jù)顯示以及vuex緩存的問(wèn)題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Vue中el-menu-item實(shí)現(xiàn)路由跳轉(zhuǎn)的完整步驟
這篇文章主要給大家介紹了關(guān)于Vue中el-menu-item實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
vue axios調(diào)用接口方法報(bào)錯(cuò)500 internal server err
前端使用axios 訪問(wèn)后端接口時(shí)報(bào)錯(cuò),在瀏覽器中點(diǎn)擊紅色的報(bào)錯(cuò)數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報(bào)錯(cuò)500 internal server error的兩種解決方法,感興趣的朋友一起看看吧2023-10-10
Vue使用canvas實(shí)現(xiàn)圖片壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue使用canvas實(shí)現(xiàn)圖片壓縮上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08

