问题说明
在开发时遇到一个问题：在同一个页面，局部页面要根据下拉框的选项来动态加载不同的页面。
参考
1.Vue 下拉框代码
<el-form-item label="合约分类" prop="feeContractType"><el-select v-model="contractList.contractTypeCode" placeholder="请选择所属合约分类" clearable size="small" @change="ct_selectChanged"><el-option v-for="item in contractList" :key="item.contractTypeId" :label="item.contractTypeName" :value="{id: item.contractTypeId, path: item.contractTypePath}"></el-option></el-select></el-form-item>
其中item.contractTypePath是存储在数据库中的路径components/ContractTemplate/muban1
下拉框选择模板1，模板2的时候，部分页面加载模板页面
2.设置页面组件
<component ref="detail" :is="contractComponent" ></component>
3.方法
ct_selectChanged(value) {let path = value.path;return this.contractComponent = (resolve) => require([`@/views/${path}`], resolve)}
上述代码中的require中的符号 “`” 不是单引号，而是esc按键下面的那颗按键
4.完整代码
<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="合约分类" prop="feeContractType"><el-select v-model="contractList.contractTypeCode" placeholder="请选择所属合约分类" clearable size="small" @change="ct_selectChanged"><el-option v-for="item in contractList" :key="item.contractTypeId" :label="item.contractTypeName" :value="{id: item.contractTypeId, path: item.contractTypePath}"></el-option></el-select></el-form-item></el-form><component ref="detail" :is="contractComponent" ></component></div></template><script>import {listActiveContractType } from "@/api/system/contractType";export default {name: "ContractTemplate",data() {return {//笼罩层loading: true,// 显示搜索条件showSearch: true,// 查询参数queryParams: {contractTypeStatus: 0},// 表单参数form: {},// 表单校验rules: {},contractList: [],contractComponent: null,};},created() {this.getContractType();},methods: {ct_selectChanged(value) {let path = value.path;return this.contractComponent = (resolve) => require([`@/views/${path}`], resolve)},/** 得到分类列表 */getContractType(){listActiveContractType(this.queryParams).then(response =>{this.contractList = response.rows;console.log(response.rows)})},}};</script>
