前端 - 求解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>