【Vue-Element-Admin】级联查询

背景

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

查询

listQuery:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

1
2
3
4
5
6
7
8
9
10
11

级联查询

<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>
1
2
3
4
5
6
7
8
9
10