Calsader级联选择器的使用（vue+element）

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

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>
 

 

转载于:https://my.oschina.net/u/3734228/blog/3046060