avue tree遮挡显示不全问题

1.添加一个filters

在filters下index.js

/**
 * 文字过长截取
 * @param value
 * @param len 截取长度
 * @returns {string|*}
 */
export function ellipsis(value, len) {
  if (!value) return ''
  if (value.length > len) {
    return value.slice(0, len) + '...'
  }
  return value
}

2.在main.js加载过滤器

// 加载过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

3.在使用树的地方添加

ellipsis(14) 截取字符串多余的替换…
:title=“node.label” title鼠标悬浮展示内容

<avue-tree :option="treeOption" @node-click="nodeClick">
      <span slot-scope="{ node, data }" :title="node.label">
        <span :class="data.icon">
          {{node.label | ellipsis(14) }}
        </span>
      </span>
  </avue-tree>