背景
有两个查询条件:模块、功能点
想实现选择模块后,点击功能点下拉框,查询出对应模块下的功能点列表
查询
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>