关于vue的下拉框显示数据库的数据

举个例子：新增二级类目的时候，选择一级类目。

实现：oneId，插入

        <el-form-item label="一级分类名称" prop="oneName">
          <el-select v-model="form.oneId"  placeholder="请选择一级分类名称">
            <el-option
                    v-for="item in categoryOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

命名一个方法：查询所有的一级类目

    getOneCategorys() {
      getOneCategorys().then(response => {
        this.categoryOptions = response.data;
      });
    },

使用改方法：

 created() {
    this.getOneCategorys();
  },

引入：

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

在oneCategory.js中写上

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

最后在controller中实现查询所有在使用的一级类目就可以了；ps当然后面还需要写service层和mapper啦

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