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

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

代码如下：

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 list = tTwoCategoryService.selectTTwoCategoryNameList(oneId);

        return AjaxResult.success(list);
    }

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

        return AjaxResult.success(list);
    }

实现查询数据。

做个笔记。。。