两个Select选择器实现联动（vue+element）

2019独角兽企业重金招聘Python工程师标准>>>

1.需求：点击某个设备组获取该设备组的所有的商品。

2.效果图：

3.实现：

（1）前端

<el-select v-model="" @change="selectGoodsByGroupId($event)" clearable placeholder="请选择设备组" filterable>
      <el-option v-for="item in deviceGroups" :label="" :key="" :value=""></el-option>
    </el-select>
    <el-select v-model="" clearable placeholder="请选择商品" filterable>
      <el-option v-for="item in goods" :label="" :key="" :value=""></el-option>
    </el-select>

//进入列表时先获取所有的设备组   
getAllDevice(){//获取所有的设备组
      getAllDevice()
        .then(response =>{
           = response;
        })
    },   

selectGoodsByGroupId(val){//根据设备组id获取相应的商品
      //(val);
      if(val != null && val != '' && val != undefined){
        selectGoodsByGroupId(val)
          .then(response => {
            //给goods数组赋值
             = response;
          })
      }
    },

（2）后端

１.controller层

/**
     * 根据设备组Id进行获取商品Id进而查询对应的商品信息
     * @param groupId
     * @return
     */
    @RequestMapping(value = "/selectGoodsByGroupId/{groupId}",method = )
    @ResponseBody
    public List<GoodsVo> selectGoodsByGroupId(@PathVariable("groupId") int groupId){
        return (groupId);
    }

层

/**
     * 根据设备组Id进行获取商品Id进而查询对应的商品信息
     * @param groupId
     * @return
     */
    public List<GoodsVo> selectGoodsByGroupId(int groupId){
        return (groupId);
    }

层

/**
     * 根据设备组Id进行获取商品Id进而查询对应的商品信息
     * @param groupId
     * @return
     */
    List<GoodsVo> selectGoodsByGroupId(@Param("groupId") int groupId);

<!-- 根据设备组Id进行获取商品Id进而查询对应的商品信息 -->
    <select  resultMap="BaseResultMap">
        select id,goods_name from ue_tb_goods where id in (select goods_id from ue_tb_rs_dg_goods where group_id = #{groupId})
    </select>