兩個Select選擇器實現聯動（vue+element）

1.需求：點擊某個設備組獲取該設備組的全部的商品。

2.效果圖：

3.實現：

（1）前端

<el-select v-model="listQuery.groupId" @change="selectGoodsByGroupId($event)" clearable placeholder="請選擇設備組" filterable>
      <el-option v-for="item in deviceGroups" :label="item.groupName" :key="item.id" :value="item.id"></el-option>
    </el-select>
    <el-select v-model="listQuery.goodsId" clearable placeholder="請選擇商品" filterable>
      <el-option v-for="item in goods" :label="item.goodsName" :key="item.id" :value="item.id"></el-option>
    </el-select>

//進入列表時先獲取全部的設備組   
getAllDevice(){//獲取全部的設備組
      getAllDevice()
        .then(response =>{
          this.deviceGroups = response;
        })
    },   

selectGoodsByGroupId(val){//根據設備組id獲取相應的商品
      //console.log(val);
      if(val != null && val != '' && val != undefined){
        selectGoodsByGroupId(val)
          .then(response => {
            //給goods數組賦值
            this.goods = response;
          })
      }
    },

（2）後端

１.controller層

/**
     * 根據設備組Id進行獲取商品Id進而查詢對應的商品信息
     * @param groupId
     * @return
     */
    @RequestMapping(value = "/selectGoodsByGroupId/{groupId}",method = RequestMethod.GET)
    @ResponseBody
    public List<GoodsVo> selectGoodsByGroupId(@PathVariable("groupId") int groupId){
        return baseBiz.selectGoodsByGroupId(groupId);
    }

2.biz層

/**
     * 根據設備組Id進行獲取商品Id進而查詢對應的商品信息
     * @param groupId
     * @return
     */
    public List<GoodsVo> selectGoodsByGroupId(int groupId){
        return mapper.selectGoodsByGroupId(groupId);
    }

3.mapper層

/**
     * 根據設備組Id進行獲取商品Id進而查詢對應的商品信息
     * @param groupId
     * @return
     */
    List<GoodsVo> selectGoodsByGroupId(@Param("groupId") int groupId);

4.mybatis.xml

<!-- 根據設備組Id進行獲取商品Id進而查詢對應的商品信息 -->
    <select id="selectGoodsByGroupId" 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>