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

相关推荐
程序员小凯7 小时前
Spring MVC 分布式事务与数据一致性教程
分布式·spring·mvc
艾菜籽16 小时前
SpringMVC练习:加法计算器与登录
java·spring boot·spring·mvc
程序员小凯17 小时前
Spring MVC 多租户架构与数据隔离教程
spring·架构·mvc
艾菜籽2 天前
Spring Web MVC入门补充1
java·后端·spring·mvc
艾菜籽2 天前
Spring MVC入门补充2
java·spring·mvc
风兮w2 天前
MVC、MVP和MVVM的区别
mvc
蓝天智能2 天前
QT MVC中Model的特点及使用注意事项
qt·mvc
低音钢琴3 天前
【SpringBoot从初学者到专家的成长15】MVC、Spring MVC与Spring Boot:理解其差异与联系
spring boot·spring·mvc
.NET修仙日记3 天前
2025年ASP.NETMVC面试题库全解析
面试·职场和发展·c#·asp.net·mvc·面试题·asp.net mvc
William_cl3 天前
C# MVC网页调试的方法
开发语言·c#·mvc