【Vue-Element-Admin】级联查询

背景

有两个查询条件：模块、功能点
想实现选择模块后，点击功能点下拉框，查询出对应模块下的功能点列表

查询

listQuery:

export default{return{listQuery:{//page:1,//limit:20,//如果想兼容按条件导出，可以定义查询条件age:undefined,sex:undefined},moduleOptions:null,functionPointOptions:null}
}

getModuleList(){return findModuleList(this.listQuery).then(response=>{this.moduleOptions=response.data['items']})
},
getFunctionPointList(){return findFunctionPointList(this.listQuery).then(response=>{this.functionPointOptions=response.data['items']})
}

级联查询

<template>	<el-form-item label="级联查询" prop="search"><el-select v-model="listQuery.module" placeholder="模块" filterable remote :remote-method="getModuleList" clearable @focus="(event)=>getModuleList()" style="width: 100%"><el-option v-for="item in moduleOptions" :key="item" :label="item" :value="item" /></el-select><el-select v-model="listQuery.function_point" placeholder="模块" filterable remote :remote-method="getFunctionPointList" clearable @focus="(event)=>getFunctionPointList()" style="width: 100%"><el-option v-for="item in functionPointOptions" :key="item" :label="item" :value="item" /></el-select></el-form-item>
</template>