element el-tree如何让每层级文字的div width 动态调整

Element UI 的 `el-tree` 组件默认不会直接提供动态调整每个层级文字 div 宽度的功能。不过，你可以通过自定义节点渲染以及 CSS 或 Vue.js 来实现这个需求。这里是一个简单的思路：

1. **自定义节点组件**:
使用 `render-item` 函数来自定义每个树节点的 `<el-tree-node>` 标签，并在其内部添加一个用于显示文本内容的自定义 `div`。例如：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    :default-expand-all="true"
    render-item="renderTreeNode"
  ></el-tree>

  <template #renderTreeNode(node, data) {
    <el-tree-node :key="node.id" class="custom-node">
      <div v-for="(item, index) in node.label.split(' ')" :key="index" :style="{ width: item.length + '%' }">{{ item }}</div>
    </el-tree-node>
  }
</template>

在这个例子中，我们将 `label` 属性分割成数组，然后为每个单词设置宽度百分比。

2. **CSS 控制样式**:
添加一些基本的 CSS 规则来控制 `.custom-node` 类的宽度。如果需要根据单词长度自动调整，可以使用媒体查询和 JavaScript 计算每个单词的实际宽度。

.custom-node {
  display: flex;
  flex-wrap: wrap;
}

.custom-node div {
  white-space: nowrap; /* 防止单词换行 */
}

**注意**: 这种方法可能会导致行内元素过多时的性能问题，尤其是数据量较大的时候。为了优化，可以考虑将较长的文字部分隐藏或折叠。