Calsader級聯選擇器的使用（vue+element）

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>