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

最新推荐文章于 2024-05-18 10:32:09 发布

Nancy哇

最新推荐文章于 2024-05-18 10:32:09 发布

阅读量694

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_45957275/article/details/127406621

版权

文字超出显示，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>
        );
      }
    },