问题遇到的现象和发生背景
原本的需求是：数组里放很多分类对象，分类里面有子列表里面是分类文章对象和子分类对象，子分类对象里有子列表里面是分类文章和分类对象，层级不定，节点树展示分类名和文章名，但是分类名只是展示，分类文章名可点击，点击后右侧显示文章详情
我用gpt问过了，不过没有报错也没问出来结果
data: [
{
name: '分类',
categoryId: '245',
list:[
{
name: '文章',
articleId: '220',
categoryIds: "96,102,245,"
},
{
name: '分类',
categoryId: '',
list: [
{
name: '文章',
articleId: '221',
categoryIds: "96,102,246,"
},
]
},
]
},
{省略,
{省略},
]
新增需求：节点文字过长以点隐藏，鼠标悬浮在节点上显示悬浮的文字
https://img-blog.csdnimg.cn/10fc9bbe992b45978d2b8c73b8d8142e.png
但是有一个问题，我这个el-tree里面放入元素，树节点上的文字就不显示了，也不报错，不知道为啥
遇到的现象和发生背景，请写出第一个错误信息
el-tree里面放入元素，树节点上的文字就不显示了，也不报错，不知道为啥
用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%
我先是按照大家常规方法写的，但是el-tree标签里面写了{{node}}----{{data}}tree节点树上文字不显示，不报错
https://img-blog.csdnimg.cn/2f5f97b0c1884a58be916855c5dc6b18.png
<el-tree :data="tree" :props="defaultProps" ref="tree"
node-key="aid" icon-class="el-icon-arrow-down" :render-content="renderContent"
@node-click="handleNodeClick" highlight-current default-expand-all
v-if="infoName!=='视频教程'&&infoName!=='更新日志'">
<template slot-scope="{ node,data }"><span>{{node}}----{{data}}<span></template>
</el-tree>
运行结果及详细报错内容
导致以前el-tree的节点文章全都不显示了，把el-tree里面嵌套的标签删掉又显示了
我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%
我尝试在el-tree里面嵌套也尝试过用v-slot
接着用render-content事件还是不行，不显示也不报错，我怀疑是循环函数的事情，但是不知道怎么改
https://img-blog.csdnimg.cn/2f5f97b0c1884a58be916855c5dc6b18.png
tree: [],
defaultProps: {
id: 'aid',
children: 'categoryAndArticleList',
label: 'name',
disabled: 'disabled',
},
lastSelectedAid: '',//上次选中aid
articleIdList: [],//当前menu全部文章
getMenu() {
this.loadingAll = true;
fetchListCategory({sign: this.treeFrom.sign}).then(response => {
this.menu = response.data.data.categoryAndArticleList;
let menuList = data[parseInt(this.activeIndex)];
this.infoName = menuList.name;
let childrenList = menuList.categoryAndArticleList;
if (childrenList) {
let tree = JSON.parse(JSON.stringify(childrenList));
this.processCategoryAndArticleList(tree);
this.tree = tree;
} else {
this.tree = [];
}
console.log("this.tree", this.tree);
if (this.firstArticleId) {
this.$nextTick(() => {
if (this.articleIdList.length > 0) {
console.log("this.articleIdList", this.articleIdList);
this.$refs.tree.setCurrentKey(this.articleIdList[0].aid)
this.lastSelectedAid = this.articleIdList[0].aid;
this.getDoc(this.articleIdList[0].articleId);
} else {
this.doc = {};
}
})
}
this.firstArticleId = false;
this.loadingAll = false // 请求成功后关闭 loading
}).catch(error => {
console.log(error);
}).finally(() => {
this.loadingAll = false // 请求完成后关闭loading
})
},
// 声明一个递归函数，用于处理categoryAndArticleList列表
processCategoryAndArticleList(list) {
list.forEach(item => {
if (item.categoryIds && item.articleId) {
item.aid = item.categoryIds.split(',').join('') + item.articleId;
} else {
// item.aid = item.categoryIds + item.articleId;
item.aid = null;
item.disabled = true;
}
// console.log("aid===",item.aid);
if (item.articleId) {
item.name = item.title;
this.$nextTick(() => {
this.articleIdList.push({aid: item.aid, articleId: item.articleId});
})
} else {
}
if (item.categoryAndArticleList) {
this.processCategoryAndArticleList(item.categoryAndArticleList);
const trueItem = item.categoryAndArticleList.find(subItem => subItem.articleId);
if (trueItem) {
if (item.name===false) {
item.name = trueItem.title;
}
} else {
}
}
});
},
<el-tree :data="tree" :props="defaultProps" ref="tree"
node-key="aid" icon-class="el-icon-arrow-down" :render-content="renderContent"
@node-click="handleNodeClick" highlight-current default-expand-all>
</el-tree>
renderContent(h, { node, data }) {
return (
<template>
<el-tooltip content={data.name} placement="top">
<span>{data.name}</span>
<div slot="content">
<span>{data.name}</span>
</div>
</el-tooltip>
</template>
)
},
