父级关联数据处理

声明

本篇的作品来自于 “全栈之巅” 老师的教学视频https://www.bilibili.com/video/av51931842/,
简书https://www.jianshu.com/u/cd64ab6779d0,
将其中的重要部分做摘录，如有冒犯，请联系删除

编辑页面

• 添加上级分类选择器

<el-form-item label="上级分类">
    <el-select v-model="model.parent">
        <el-option
            v-for="item in parents"
            :key="item._id"
            :label="item.name"
            :value="item._id"
        ></el-option>
    </el-select>
</el-form-item>

• 在 data 中添加 父级数组

data: () => ({
  parents: []
})

• 在 created 钩子里 初始化父级数组

created () {
  this.fetchParents()
}

• 添加 查找父级数组方法

methods: {
  async fetchParents () {
    const res = awiat this.$http.get(`categories`);
    this.parents = res.data;
  }
}

后台路由

• 查看路由

router.get('/categories', async (req, res) => {
  const items = await Category.find().populate('parent');
  res.send(items);
}

其中，使用populate讲父级关联起来，能够获取到父级的对象，通过对象的id获取到对象的属性，从而显示出来父级对象的属性信息

后台模型

const schma = new mongoose.Schema({
  name: { type: String },
  parent: { type: mongoose.SchemaTypes.ObjectId, ref: 'Category'  }
});

• SchemaTypes: 模式类型处理路径默认值、验证、getter、setter、字段选择默认值以及字符串和数字的其他一般特征。
• 指定一个类型的ObjectId
• ref 关联 模型 Category

列表页面

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

通过id关联，获取到父级的属性，通过prop显示