买东西的网站,网站推广公司新锐,国外网站无法访问,网站做网站做任务一、目的
在NET MVC中使用Element-Plus编写可重复使用的组件。
二、准备工作
2.1 NET MVC项目
2.2 MVC项目中使用Element-Plus框架。不熟悉的可以参考此文章#xff1a;
NET MVC中如何使用Element-Plus-CSDN博客
三、组件编写
3.1、新建一个MVC的部分视图页面#xff…一、目的
在NET MVC中使用Element-Plus编写可重复使用的组件。
二、准备工作
2.1 NET MVC项目
2.2 MVC项目中使用Element-Plus框架。不熟悉的可以参考此文章
NET MVC中如何使用Element-Plus-CSDN博客
三、组件编写
3.1、新建一个MVC的部分视图页面内容如下
{Layout null;
}template idworkOrderStatusel-tag classml-2 :typegetStatusClass() effectdark sizesmall{{workOrder.StatusName}}/el-tag
/templatescriptvar 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;}}}};
/script3.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 :datascope.row/work-order-status
到此在MVC中编写可重复使用的组件就告一段落。这样我们就可以在列表或者详情页面都使用同一个状态组件避免状态显示逻辑变更的时候重复修改不同页面。
