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