兩個Select選擇器實現聯動（vue+element）
阿新 • • 發佈：2019-05-06
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>