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的部分视图页面，内容如下：

@{
    Layout = null;
}

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

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

Html.RenderPartial("~/Views/WorkOrder/Component/Status.cshtml");

然后在Vue中使用组件：

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使用组件：

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