vue3中element Plus插槽示例詳解
更新時(shí)間：2024年05月06日 09:44:55 作者：HWL5679
這篇文章主要介紹了vue3中element Plus插槽,#default=scope定義了一個(gè)名為 default 的插槽,并將當(dāng)前行的數(shù)據(jù)傳遞給一個(gè)名為 scope 的變量,本文結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
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
在Vue應(yīng)用中，通常需要將一些狀態(tài)進(jìn)行持久化，以便在用戶關(guān)閉瀏覽器或刷新頁(yè)面后，常見(jiàn)的方法就是LocalStorage和SessionStorage，所以本文就來(lái)講講這兩種方法的具體實(shí)現(xiàn)吧2023-06-06
在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關(guān)于Vue3中Vuex詳細(xì)使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
今天小編就為大家分享一篇vue生成文件本地打開(kāi)查看效果的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問(wèn)題
本篇文章主要介紹了vue2.x中請(qǐng)求之前數(shù)據(jù)顯示以及vuex緩存的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家介紹了vue基于electron構(gòu)建第一個(gè)程序過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
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