【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弹窗的显示（方法二）

这种写法和上面的写法实现的效果一样，都可用于值的双向绑定，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>

总结：

1. 计算数据变化后的结果：可以监听响应式数据的变化，一般计算购物车的总价或计算商品的平均评分
2. 格式化数据：过滤、排序数据
3. 控制弹窗是否显示

欢迎补充~