vue中有多个下拉框,第二个下拉框要根据第一个得下拉框数据进行选择

思路：首先获取第一个下拉框得数据，给第一个下拉框注册一个change事件，如果选中了第一个下拉框，就会通过第一个下拉框得值查询第二个下拉框所要显示得值；

代码如下：

      <el-form-item label="一级分类名称" prop="oneId" >
        <el-select v-model="queryParams.oneId"  placeholder="请选择一级分类名称" @change="checkCategoryPromotion(queryParams.oneId)">
          <el-option
                  v-for="item in oneCategoryOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
          ></el-option>
        </el-select>

      </el-form-item>

      <el-form-item label="二级分类名称" prop="twoId" >
        <el-select v-model="queryParams.twoId"  placeholder="先选择一级，后选二级分类" >
          <el-option
                  v-for="item in twoCategoryOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

methods: {
   
    getOneCategorys() {
      getOneCategorys().then(response => {
        this.oneCategoryOptions = response.data;


      });
    },
    checkCategoryPromotion(oneId){
      getTwoCategorys(oneId).then(response => {
        this.queryParams.twoId=null;
        this.twoCategoryOptions = response.data;
        // alert("oneId"+JSON.stringify(this.twoCategoryOptions));
      });

}

import { getOneCategorys } from "@/api/backstage/oneCategory";
import { getTwoCategorys } from "@/api/backstage/twoCategory";

// 查询一级分类 js文件
export function getOneCategorys() {
  return request({
    url: '/backstage/oneCategory/all',
    method: 'get'
  })
}

// 查询二级分类 js文件
export function getTwoCategorys(oneId) {
  return request({
    url: '/backstage/twoCategory/all/'+oneId,
    method: 'get'
  })
}

controller中的代码段

    /**
     * 查询二级分类列表
     */
    @PreAuthorize("@ss.hasPermi('backstage:twoCategory:all')")
    @GetMapping("/all/{oneId}")
    public AjaxResult all(@PathVariable Long oneId)
    {
     
        List<TTwoCategory> list = tTwoCategoryService.selectTTwoCategoryNameList(oneId);

        return AjaxResult.success(list);
    }

    /**
     * 查询一级分类列表
     */
    @PreAuthorize("@ss.hasPermi('backstage:oneCategory:all')")
    @GetMapping("/all")
    public AjaxResult all()
    {
        List<TOneCategory> list = tOneCategoryService.selectTOneCategoryNameList();

        return AjaxResult.success(list);
    }

实现查询数据。

做个笔记。。。