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