problem statement
I encountered a problem during development: on the same page, partial pages should dynamically load different pages according to the options in the drop-down box.
refer to
1. Vue drop-down box code
<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>
Where item.contractTypePathis the path stored in the database. When template 1 and template 2 are selected in components/ContractTemplate/muban1
the drop-down box, some pages load the template page
2. Set page components
<component ref="detail" :is="contractComponent" ></component>
3. Method
ct_selectChanged(value) {
let path = value.path;
return this.contractComponent = (resolve) => require([`@/views/${
path}`], resolve)
}
The symbol "`" in the above code requireis not a single quotation mark, but the button below the esc button
4. Complete code
<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>