Calsader級聯選擇器的使用（vue+element）
阿新 • • 發佈：2019-05-07
1.需求：進行動態載入次級選項，當選中某一級時，動態載入該級下的選項。即，點選某個型別獲取當前型別所有的商品。
2.效果圖：
3.實現：
(1)前端
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="700px"> <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm"> <el-row> <el-col :span="12"> <el-form-item label="代理商" prop="userId"> <el-select v-model="form.userId" @change="handleUserIdOption($event)" clearable filterable placeholder="請選擇代理商" filterable> <el-option v-for="item in users" :key="item.id" :label="item.userName" :value="item.id"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="裝置組" prop="groupId"> <el-select v-model="form.groupId" clearable filterable placeholder="請選擇裝置組"> <el-option v-for="item in deviceGroupsEdit" :label="item.groupName" :key="item.id" :value="item.id"></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="商品名稱" prop="goodsId"> <el-cascader :options="goodsOptions" @active-item-change="handleItemChange" @change = "categoryChange($event)" :props="props" :clearable="true" filterable> </el-cascader> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="商品價格" prop="goodsPrice"> <el-input v-model.number="form.goodsPrice" min="0" step="0.5" style="width:220px" type="number" placeholder="請輸入商品價格"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否推薦" prop="isRecommend"> <el-switch v-model="form.isRecommend" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="預售時間" prop="presellAt"> <el-date-picker v-model="form.presellAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="請選擇日期時間"> </el-date-picker> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel('form')">取 消</el-button> <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">確 定</el-button> <el-button v-else type="primary" @click="update('form')">確 定</el-button> </div> </el-dialog>
props:{ label: 'label', value: 'value', children: 'children' }, categoryChange(val){//選取商品後給goodsId賦值 this.form.goodsId = val[1]; /*console.log(val[0]); console.log(val[1]);*/ }, getGoodsOptions(){//獲取所有的商品型別 getGoodsOptions() .then(response =>{ this.goodsOptions = response; //alert(this.goodsOptions); this.goodsOptions.forEach((item,index)=>{ this.$set(this.goodsOptions[index], 'children', []) // right }) }) }, handleItemChange(val){//商品級聯 //console.log(val); let value = val[0]; getGoodsByGoodsType(value) .then(response =>{ for (let i = 0; i <this.goodsOptions.length ; i++) { if(this.goodsOptions[i].value == value){ this.$set(this.goodsOptions[i],"children",response); } } }) }, handleCreate() { this.resetTemp(); this.deviceGroupsEdit = []; this.getGoodsOptions(); this.dialogStatus = 'create'; this.dialogFormVisible = true; },
（2）後端
１.controller層
/** * 獲取所有的商品型別 * @return */ @RequestMapping(value = "/getGoodsOptions", method = RequestMethod.GET) @ResponseBody public List<Map<String, Object>> getGoodsOptions(){ return baseBiz.getGoodsOptions(); } /** * 根據goodsType查詢商品資訊 * @param id * @return */ @RequestMapping(value = "/getGoodsByGoodsType/{id}", method = RequestMethod.GET) @ResponseBody public List<Map<String, Object>> getGoodsByGoodsType(@PathVariable("id") int id){ return baseBiz.getGoodsByGoodsType(id); }
2.biz層
/**
* 按goodsType進行分類查詢，獲取所有的型別
* @return
*/
public List<Map<String,Object>> getGoodsOptions(){
return mapper.getGoodsOptions();
}
/**
* 根據goodsType查詢商品
* @param id
* @return
*/
public List<Map<String,Object>> getGoodsByGoodsType(int id){
return mapper.getGoodsByGoodsType(id);
}3.mapper層
/**
* 查詢商品的型別，goodsType進行分組
* @return
*/
List<Map<String,Object>> getGoodsOptions();
/**
* 根據goodsType查詢商品
* @return
*/
List<Map<String, Object>> getGoodsByGoodsType(@Param("id") int id);4.mybatis.xml
<!-- 解決前端el-Cascader級聯元件key必須為label的問題 -->
<resultMap id="goodsTypeResult" type="java.util.HashMap">
<result column="id" jdbcType="INTEGER" property="value"/>
<result column="goods_type" jdbcType="VARCHAR" property="label"/>
</resultMap>
<resultMap id="goodsNameResult" type="java.util.HashMap">
<result column="id" jdbcType="INTEGER" property="value"/>
<result column="goods_name" jdbcType="VARCHAR" property="label"/>
</resultMap>
<!-- 以goodsType欄位進行分組查詢 -->
<select id="getGoodsOptions" resultMap="goodsTypeResult">
select id,goods_type from ue_tb_goods group by goods_type
</select>
<!-- 根據goodsType查詢所有商品 -->
<select id="getGoodsByGoodsType" resultMap="goodsNameResult">
select id,goods_name from ue_tb_goods where goods_type in (select goods_type from ue_tb_goods where id = #{id})
</select>