NET MVC中使用Element-Plus框架编写组件

一、目的

在NET MVC中使用Element-Plus编写可重复使用的组件。

二、准备工作

2.1 NET MVC项目

2.2 MVC项目中使用Element-Plus框架。不熟悉的可以参考此文章:

NET MVC中如何使用Element-Plus-CSDN博客

三、组件编写

3.1、新建一个MVC的部分视图页面,内容如下:

cs 复制代码
@{
    Layout = null;
}

<template id="workOrderStatus">
    <el-tag class="ml-2" :type="getStatusClass()" effect="dark" size="small">{{workOrder.StatusName}}</el-tag>
</template>

<script>
    var componentWorkOrderStatus = {
        template: '#workOrderStatus',
        props: ['data'],
        watch: {
            data(newVal, oldVal) {
                this.workOrder = newVal;
            }
        },
        data: function () {
            return {
                workOrder: this.data
            };
        },
        methods: {
            getStatusClass() {
                const { Status } = this.workOrder;
                switch (Status) {
                    case 99:
                        return 'success';
                    case 1:
                        return 'warning';
                    case -1:
                        return 'danger';
                    default:
                        return 'default';
                }
            }
        }
    };
</script>

3.2、在页面中引入组件并使用

在页面中使用Html.RenderPartial("~/Views/WorkOrder/Component/Status.cshtml");引入组件模板

cs 复制代码
Html.RenderPartial("~/Views/WorkOrder/Component/Status.cshtml");

然后在Vue中使用组件:

javascript 复制代码
const appData = {
    components: {
        'work-order-status': componentWorkOrderStatus
    },
    data() {
        return {
            loading: false,
            search: {
                Page: 1,
                PageSize: 20,
                Total: 0
            }
        };
    },
    mounted() {
    },
    methods: {
    }
};
const app = vueApp.create(appData);

在html使用组件:

html 复制代码
<work-order-status :data="scope.row"></work-order-status>

到此,在MVC中编写可重复使用的组件就告一段落。这样我们就可以在列表或者详情页面都使用同一个状态组件,避免状态显示逻辑变更的时候,重复修改不同页面。

相关推荐
周杰伦fans3 天前
.net core webapi/mvc阿里云服务器部署 - 错误解决
阿里云·mvc·.netcore
BFT白芙堂3 天前
GRASP 实验室研究 论文解读 | 机器人交互:基于神经网络引导变分推理的快速失配估计
人工智能·神经网络·机器学习·mvc·人机交互·科研教育机器人·具身智能平台
William_cl3 天前
MVC 中 AJAX 与前后端交互深度实战(含独家避坑与场景化方案)
ajax·mvc·交互
Cyan_RA94 天前
SpringMVC 执行流程分析 详解(图解SpringMVC执行流程)
java·人工智能·后端·spring·mvc·ssm·springmvc
hello 早上好4 天前
Spring MVC 类型转换与参数绑定:从架构到实战
spring·架构·mvc
sanggou5 天前
License 集成 Spring Gateway:解决 WebFlux 非阻塞与 Spring MVC Servlet 阻塞兼容问题
spring·gateway·mvc
optimistic_chen5 天前
【Java EE进阶 --- SpringBoot】Spring DI详解
spring boot·笔记·后端·spring·java-ee·mvc·di
速易达网络5 天前
ASP.NET MVC 连接 MySQL 数据库查询示例
数据库·asp.net·mvc
cyforkk6 天前
Spring 异常处理器:从混乱到有序,优雅处理所有异常
java·后端·spring·mvc
Cloud-Future8 天前
Spring MVC 处理请求的流程
java·spring·mvc