求解el-tree标签里面嵌套元素tree树节点的文字就全部不显示？

Question

原本的需求是：数组里放很多分类对象，分类里面有子列表里面是分类文章对象和子分类对象，子分类对象里有子列表里面是分类文章和分类对象，层级不定，节点树展示分类名和文章名，但是分类名只是展示，分类文章名可点击，点击后右侧显示文章详情

这是数据结构，因为需要一个node-key但是我这后端没返回，我就把拿到的所有数据通过函数循环一遍，里面新增一个aid属性使用，aid = categoryIds+articleId,如果没有categoryIds和articleId我会给aid=null,又一部分aid都是null,但是没影响展示

data: [
  {
    name: '分类',
    categoryId: '245',
    list:[
            {
               name: '文章',
               articleId: '220',
               categoryIds: "96,102,245,"
             },
            {
               name: '分类',
               categoryId: '',
               list: [
                      {
                        name: '文章',
                        articleId: '221',
                        categoryIds: "96,102,246,"
                      },
                     ]
             },
    ]
  },
  {...},
  {...},
]
 

 tree: [],
      defaultProps: {
        id: 'aid',
        children: 'categoryAndArticleList',
        label: 'name',
        disabled: 'disabled',
      },
      lastSelectedAid: '',//上次选中aid
      articleIdList: [],//当前menu全部文章

 getMenu() {
//这上面一部分是拿menu的值和处理menu的值 下面的是tree节点的
      this.loadingAll = true;
      fetchListCategory({sign: this.treeFrom.sign}).then(response => {
        const filterArr = ["入门手册", "FAQ"];
        const filteredData = response.data.data.categoryAndArticleList.filter(item => {return filterArr.includes(item.name);});
 
        this.searCategoryId = filteredData[0].categoryId+','+filteredData[1].categoryId;
        console.log("this.searCategoryId",typeof this.searCategoryId,this.searCategoryId);
 
        for (let i = 0; i < filteredData.length; i++) {
          if (filteredData[i].name === '入门手册') {
            filteredData[i].icon = '/img/help/rumenshouce.png';
          }
          if (filteredData[i].name === 'FAQ') {
            filteredData[i].icon = '/img/help/FAQ.png';
          }
        }
 
        let data = filteredData || [];
        data.push({name: '视频教程', descr: '手把手视频教学', icon: '/img/help/shipinjiaocheng.png'}, {
          name: '更新日志',
          descr: '版本更新内容合集',
          icon: '/img/help/gengxinrizhi.png'
        })
        this.menu = data;
 
        let menuList = data[parseInt(this.activeIndex)];
        this.infoName = menuList.name;


        // 从这里开始把拿到的tree数据循环处理
        let childrenList = menuList.categoryAndArticleList;
        if (childrenList) {
          let tree = JSON.parse(JSON.stringify(childrenList));
          //调用循环函数给每个对象新增aid用来当node-key
          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;
              //调用文章详情传递第一批文章的id
              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) {
          //aid = 96102245220; categoryIds: "96,102,245," + articleId: "220"
          item.aid = item.categoryIds.split(',').join('') + item.articleId;
        } else {
          item.aid = null;
          item.disabled = true;
        }
 
        // console.log("aid===",item.aid);
 
        if (item.articleId) {
          item.name = item.title;
          this.$nextTick(() => {
            //所有的文章id和拼接后的aid都存起来
            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里面放入元素，树节点上的文字就不显示了，也不报错，不知道为啥
我先是按照大家常规方法写的，但是el-tree标签里面写了{{node}}----{{data}}tree节点树上文字不显示，不报错

<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>

接着用render-content事件还是不行，不显示也不报错，我怀疑是循环函数的事情，但是不知道怎么改

<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>
      )
    },

Answer 1

解决了，先放答案
<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
                       v-if="infoName!=='视频教程'&&infoName!=='更新日志'">
                <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>

我使用node.name的时候一直提示
TypeError: Converting circular structure to JSON

--> starting at object with constructor 'Node'
|     property 'store' -> object with constructor 'TreeStore'
|     property 'currentNode' -> object with constructor 'Node'
|     ...
|     property 'parent' -> object with constructor 'Node'
--- property 'parent' closes the circle，

我怀疑是递归循环问题，尝试使用插件flatted来扁平化数据未果，手动扁平化数据同上，
多加一个标签提示我Multiple root nodes returned from render function. Render function should return a single root node.把标签都删了，给el-tree绑定一个v-model变量把值给它也不行 <el-tree :data="tree" :props="defaultProps" v-model="selectedNode">

  <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>{{ node }}  {{ data }}</span>
  </span>
</el-tree>

就在我心灰意冷，脑袋开始犯困中，看岔劈代码了，把上面el-tree里的代码复制成下面el-table的了，又一次把和很多文章中大差不差的代码又复制到我的el-tree里面，哎！怎么出现静态文字了，也不报错了，怎么回事？我尝试打印{{node}} {{data}}页面卡死,删掉访问node.name,node.label页面卡死，访问{{data},啊？出来数据了，访问{{data.name}}出现动态文字了，哦吼~可以了，我又把el-button换成el-link和el-tag有效果，换成span和div就不行，赶紧动态加上一个class把分类加粗字体加大，再用上我之前看到的文字悬浮的文章，el-tree有自带的悬浮文字,:title=data.name，至此悬浮文字需求解决

复制的这篇文章，感谢作者
https://zhuanlan.zhihu.com/p/419193568

<template slot-scope="scope">

        <el-button
          @click="removeRow(scope.row)"
          type="danger"
          plain
          size="small"
          >移除</el-button
        >
      </template>