声明
本篇的作品来自于 “全栈之巅” 老师的教学视频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显示
