vue computed的傳參和element-plus彈窗的顯示過程
更新時間：2026年03月25日 08:47:41 作者：白桃與貓
這篇文章主要介紹了vue computed的傳參和element-plus彈窗的顯示過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1. vue3中computed的傳參使用
<template>
<el-tag :type="computedProcessTypeStyle(scope.row.processType)" size="large">
{{ computedProcessTypeName(scope.row.processType) }}
</el-tag>
</template>
<script setup lang="ts">
const computedProcessTypeStyle = computed(() => (type: string) => {
if (type === 'new' || type === 'fail') {
return 'danger';
}
if (type === 'processed') {
return 'success';
}
if (type === 'ticket') {
return '';
}
if (type === 'close') {
return 'info';
}
if (type === 'unknown') {
return 'warning';
}
});
</script>
2. element-plus彈窗的顯示（方法一）
使用該組件：
3. element-plus彈窗的顯示（方法二）
這種寫法和上面的寫法實現(xiàn)的效果一樣，都可用于值的雙向綁定，defineModel寫法更簡單！
注意是在<script setup >中使用
<template>
<el-dialog v-model="visible" title="選擇組件" width="35%" :height="600">
...
</el-dialog>
</template>
<script setup lang="ts">
const visible = defineModel('visible', { local: true, default: false });
</script>
引用組件處：
<template>
<ReportTreeDialog v-model:visible="reportTreeVisible" ></ReportTreeDialog>
</template>
<script setup lang="ts">
import ReportTreeDialog from './form-item/ReportTreeDialog.vue';
</script>
總結
- 計算數(shù)據(jù)變化后的結果：可以監(jiān)聽響應式數(shù)據(jù)的變化，一般計算購物車的總價或計算商品的平均評分
- 格式化數(shù)據(jù)：過濾、排序數(shù)據(jù)
- 控制彈窗是否顯示
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue登錄路由驗證的實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要為大家介紹了VUE指令和pinia控制按鈕權限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家詳細介紹了Vue使用echarts散點圖在區(qū)域內標點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue頭部導航動態(tài)點擊處理方法,文中通過一段示例代碼給大家介紹了vue實現(xiàn)動態(tài)頭部的方法，需要的朋友可以參考下2018-11-11
詳解vue-cli+element-ui樹形表格(多級表格折騰小計)
這篇文章主要介紹了vue-cli + element-ui 樹形表格（多級表格折騰小計），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
今天小編就為大家分享一篇vue中子組件的methods中獲取到props中的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在Vue項目中,我們通常需要在組件、指令、插件等不同部分之間導入和導出功能,這篇文章主要介紹了vue3的基本指令以及對js的導入和導出方法的相關資料,需要的朋友可以參考下2025-10-10
這篇文章主要介紹了Vue中的.vue文件的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
moment是一款多語言支持的日期處理類庫, 在vue中如何使用呢?這篇文章主要給大家介紹了關于vue之moment使用的相關資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實例初始化之后,進行數(shù)據(jù)偵聽和事件，偵聽器的配置之前同步調用2022-06-06