快捷導(dǎo)航

vue computed的傳參和element-plus彈窗的顯示過(guò)程

更新時(shí)間：2026年03月25日 08:47:41 作者：白桃與貓

這篇文章主要介紹了vue computed的傳參和element-plus彈窗的顯示過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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ě)法和上面的寫(xiě)法實(shí)現(xiàn)的效果一樣，都可用于值的雙向綁定，defineModel寫(xiě)法更簡(jiǎn)單！

注意是在<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>

總結(jié)

計(jì)算數(shù)據(jù)變化后的結(jié)果：可以監(jiān)聽(tīng)響應(yīng)式數(shù)據(jù)的變化，一般計(jì)算購(gòu)物車的總價(jià)或計(jì)算商品的平均評(píng)分
格式化數(shù)據(jù)：過(guò)濾、排序數(shù)據(jù)
控制彈窗是否顯示

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue登錄路由驗(yàn)證的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue登錄路由驗(yàn)證的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
VUE指令和pinia控制按鈕權(quán)限示例詳解
這篇文章主要為大家介紹了VUE指令和pinia控制按鈕權(quán)限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
Vue使用echarts散點(diǎn)圖在區(qū)域內(nèi)標(biāo)點(diǎn)
這篇文章主要為大家詳細(xì)介紹了Vue使用echarts散點(diǎn)圖在區(qū)域內(nèi)標(biāo)點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue頭部導(dǎo)航動(dòng)態(tài)點(diǎn)擊處理方法
這篇文章主要介紹了vue頭部導(dǎo)航動(dòng)態(tài)點(diǎn)擊處理方法,文中通過(guò)一段示例代碼給大家介紹了vue實(shí)現(xiàn)動(dòng)態(tài)頭部的方法，需要的朋友可以參考下
2018-11-11
詳解vue-cli+element-ui樹(shù)形表格(多級(jí)表格折騰小計(jì))
這篇文章主要介紹了vue-cli + element-ui 樹(shù)形表格（多級(jí)表格折騰小計(jì)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
vue中子組件的methods中獲取到props中的值方法
今天小編就為大家分享一篇vue中子組件的methods中獲取到props中的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue3的基本指令以及對(duì)js的導(dǎo)入和導(dǎo)出方法詳解
在Vue項(xiàng)目中,我們通常需要在組件、指令、插件等不同部分之間導(dǎo)入和導(dǎo)出功能,這篇文章主要介紹了vue3的基本指令以及對(duì)js的導(dǎo)入和導(dǎo)出方法的相關(guān)資料,需要的朋友可以參考下
2025-10-10
Vue中的.vue文件的使用方式
這篇文章主要介紹了Vue中的.vue文件的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue開(kāi)發(fā)之moment的介紹與使用
moment是一款多語(yǔ)言支持的日期處理類庫(kù), 在vue中如何使用呢?這篇文章主要給大家介紹了關(guān)于vue之moment使用的相關(guān)資料,需要的朋友可以參考下
2021-05-05
Vue?全部生命周期組件梳理整理
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實(shí)例初始化之后,進(jìn)行數(shù)據(jù)偵聽(tīng)和事件，偵聽(tīng)器的配置之前同步調(diào)用
2022-06-06