求解el-tree标签里面嵌套元素tree树节点的文字就不显示
问题遇到的现象和发生背景
原本的需求是：数组里放很多分类对象，分类里面有子列表里面是分类文章对象和子分类对象，子分类对象里有子列表里面是分类文章和分类对象，层级不定，节点树展示分类名和文章名，但是分类名只是展示，分类文章名可点击，点击后右侧显示文章详情
我用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>
)
},
我想要达到的结果，如果你需要快速回答，请尝试 “付费悬赏”
设置节点的 label 属性为空字符串
<el-tree :data="treeData">
<el-tree-node :label="">
<!-- 这里是内层的 tree 节点 -->
</el-tree-node>
</el-tree>
使用 el-tree-node 的 slot-scope
<el-tree :data="treeData">
<el-tree-node :label="outerNodeLabel" slot-scope="{ node }">
<el-tree :data="node.children">
<el-tree-node v-for="innerNode in node.children" :key="innerNode.id">
<span v-if="showInnerNodeText">{{ innerNode.label }}</span>
</el-tree-node>
</el-tree>
</el-tree-node>
</el-tree>
你参考下这里，大佬写得很详细：
https://img-blog.csdnimg.cn/aae943421c204fbdac9cba0cd7b430c2.png
解决了，看的知友的一篇文章，把代码看错复制到我的el-tree里，显示出按钮了，我又改了改，发现可以动态显示文字了。
把el-table里面的代码复制到我el-tree里面结果我这边没报错显示了，最后把el-button改成el-link感谢大家
<template slot-scope="scope">
<el-button
@click="removeRow(scope.row)"
type="danger"
plain
size="small"
>移除</el-button
>
</template>
修改后的代码
<el-tree :data="tree" :props="defaultProps" ref="tree"
node-key="aid" icon-class="el-icon-arrow-down"
@node-click="handleNodeClick" highlight-current default-expand-all>
<template slot-scope="{ node, data }" class="custom-tree-node showname">
<el-link class="custom-tree-node-label">
<span :class="{'treeNotLeaf' : !data.articleId}" :title="data.name">{{data.name}}</span>
</el-link>
</template>
</el-tree>
引用 皆我百晓生 小程序回复内容作答：
根据你提供的代码，我看到你在el-tree的render-content中使用了template标签，但是在模板中没有具体的内容。render-content方法应该返回一个VNode节点，你可以在其中使用element-ui的Tooltip组件来实现鼠标悬浮显示文字的效果。以下是一个修改后的例子：
<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>
methods: {
renderContent(h, { node, data }) {
return (
<el-tooltip content={data.name} placement="top">
<span>{data.name}</span>
<div slot="content">
<span>{data.name}</span>
</div>
</el-tooltip>
)
},
}
在renderContent方法中，我们使用了element-ui的Tooltip组件来实现鼠标悬浮显示文字的效果。Tooltip组件的content属性用来设置鼠标悬浮时显示的文本，slot="content"用来设置Tooltip的内容。这样，当鼠标悬浮在节点上时，会显示Tooltip并展示节点的名称。
<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>
methods: {
renderContent(h, { node, data }) {
return (
<el-tooltip content={data.name} placement="top">
<span>{data.name}</span>
<div slot="content">
<span>{data.name}</span>
</div>
</el-tooltip>
)
},
}
李小淡