文字超出显示,render-content使用

最新推荐文章于 2025-04-14 15:15:47 发布

Rzizi~

最新推荐文章于 2025-04-14 15:15:47 发布

阅读量913

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45957275/article/details/127406621

版权

本文介绍了如何使用Vue的el-tree组件实现数据的深度遍历，并展示如何通过`render-content`渲染节点时统计子节点数量，同时处理文本溢出问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字超出显示，render-content使用

el-tree也使用同理

style="width:115px; 
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block;"

:render-content="renderContent"使用

遍历el-tree数据数量

  mylist() {
      let that = this
      let datai = []
      let dataj = []
      let datan = []
      getlist().then((response) => {
        that.datas = response.extra
        that.datas.forEach(i => {
          datai = i.children
          i.num = 0
          datai.forEach(j => {
            dataj = j.children
            j.num = 0
            dataj.forEach(n => {
              datan = n.children;
              n.num = datan.length;
              j.num += n.num
            })
            i.num += j.num
          })
        });
      })
    },

render-content紧跟一个renderContent函数使用

 // 显示子节点数量
    renderContent(h, { node, data, store }) {
      //每个父节点统计子节点数量方法
      if (data.num || data.num == 0) {
        return (
          <span>
            <span title={node.label} >{node.label + "（" + data.num + "）"}</span>
          </span>
        );
      } else { // 
        return (
          <span>
            <span title={node.label} >{node.label}</span>

          </span>
        );
      }
    },