vue3中element Plus插槽示例詳解
更新時間：2024年05月06日 09:44:55 作者：HWL5679
這篇文章主要介紹了vue3中element Plus插槽,#default=scope定義了一個名為 default 的插槽,并將當前行的數(shù)據(jù)傳遞給一個名為 scope 的變量,本文結合示例代碼介紹的非常詳細,需要的朋友可以參考下
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="`確認刪除: ${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
// 問答庫 刪除函數(shù)
let questionNum = ref('')
function printRow(row: any) {
// console.log(row.question); // 打印當前行的數(shù)據(jù)
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 的插槽，并將當前行的數(shù)據(jù)傳遞給一個名為 scope 的變量。
<template #default="scope">
@click="printRow(scope.row)" 是一個事件監(jiān)聽器，它會在該 <span> 元素被點擊時調(diào)用 printRow 函數(shù)，并將 scope.row（即當前行的數(shù)據(jù)）作為參數(shù)傳遞。
<span @click="printRow(scope.row)">刪除</span>
當該函數(shù)被調(diào)用時，會使用 console.log 將參數(shù) row 的內(nèi)容打印到瀏覽器的控制臺。
function printRow(row: any) {
console.log(row.question); // 打印當前行的數(shù)據(jù)
}到此這篇關于vue3中element Plus插槽的文章就介紹到這了,更多相關vue3 element Plus插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了如何利用Vue2實現(xiàn)簡單基礎的圖片裁剪功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2022-09-09
這篇文章主要介紹了自定義input組件如何實現(xiàn)拖拽文件上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在Vue應用中，通常需要將一些狀態(tài)進行持久化，以便在用戶關閉瀏覽器或刷新頁面后，常見的方法就是LocalStorage和SessionStorage，所以本文就來講講這兩種方法的具體實現(xiàn)吧2023-06-06
在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關于Vue3中Vuex詳細使用的相關資料,需要的朋友可以參考下2022-07-07
今天小編就為大家分享一篇vue生成文件本地打開查看效果的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問題
本篇文章主要介紹了vue2.x中請求之前數(shù)據(jù)顯示以及vuex緩存的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家介紹了vue基于electron構建第一個程序過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Vue中el-menu-item實現(xiàn)路由跳轉的完整步驟
這篇文章主要給大家介紹了關于Vue中el-menu-item實現(xiàn)路由跳轉的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
vue axios調(diào)用接口方法報錯500 internal server err
前端使用axios 訪問后端接口時報錯,在瀏覽器中點擊紅色的報錯數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報錯500 internal server error的兩種解決方法,感興趣的朋友一起看看吧2023-10-10
這篇文章主要為大家詳細介紹了Vue使用canvas實現(xiàn)圖片壓縮上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08