问题说明
在开发时遇到一个问题：在同一个页面，局部页面要根据下拉框的选项来动态加载不同的页面。
参考
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>
