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;
}<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");引入组件模板

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

<work-order-status :data="scope.row"></work-order-status>

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