一、目的

在NET MVC中使用Element-Plus編寫可重復(fù)使用的組件。

二、準(zhǔn)備工作

2.1 NET MVC項(xiàng)目

2.2 MVC項(xiàng)目中使用Element-Plus框架。不熟悉的可以參考此文章：

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

三、組件編寫

3.1、新建一個(gè)MVC的部分視圖頁面，內(nèi)容如下：

@{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中編寫可重復(fù)使用的組件就告一段落。這樣我們就可以在列表或者詳情頁面都使用同一個(gè)狀態(tài)組件，避免狀態(tài)顯示邏輯變更的時(shí)候，重復(fù)修改不同頁面。