vue computed的传参和element-plus弹窗的显示过程
作者：白桃与猫
这篇文章主要介绍了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>
总结
- 计算数据变化后的结果：可以监听响应式数据的变化，一般计算购物车的总价或计算商品的平均评分
- 格式化数据：过滤、排序数据
- 控制弹窗是否显示
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。