《全栈之巅》学习笔记-父级分类_父级分类(默认值为点击数据项的分类名称)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42301205/article/details/105281166

本文记录了在全栈项目中如何实现父级分类功能，包括编辑页面增加选择父类按钮，列表页展示父级分类信息，服务器端模型增加parent字段，以及相应的后端接口修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父级分类-'Vue+Element+Nodejs+Mongodb'

1、编辑页面添加选择父类按钮

      <el-form-items label="上级分类">
        <el-select v-model="model.parent">
           //上级分类选择,label是显示的内容，value是实际保存的值
          <el-option v-for="item in parents" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-items>

<script>
export default {
  data(){
    return{
      parents: []
    }
  },
  methods:{
    async fetchParents(){
      const res = await this.$http.get(`/categories`)
      this.parents = res.data
    }
  },
  created(){
    this.fetchParents()
  }
}
</script>

2、列表页显示父级分类

      <el-table-column prop="parent.name" label="上级分类"></el-table-column>

3、server端模型中添加parent字段

    //数据库里面的ID叫Objectid，ref表示关联的模型
    parent:{type:mongoose.SchemaTypes.ObjectId,ref:'Category'}

4、修改后端接口

    // populate关联取出
    router.get('/categories',async(req,res)=>{
        const items = await Category.find().populate('parent').limit(10)
        res.send(items)
     })