el-tree 设置了expand-on-click-node="false"依旧首次依旧会默认收起

在Element UI的`el-tree`组件中，设置`expand-on-click-node="false"`意味着用户单击节点不会自动展开。然而，如果树结构默认有一个已设定好的初始状态（例如，在数据加载完成后，某些节点已经被设为了展开），即使设置了这个属性，初次展示时仍然会按照预设的状态显示。

如果你想要控制节点的初始展开状态，可以在`data`选项中对每个节点添加一个字段来指示是否应该默认展开，比如`defaultExpanded: false`或`defaultChecked: false`等，并在初始化组件时根据这个字段调整展开状态。

例如：

<el-tree :data="treeData" :default-expand-all="false">
  <!-- ... -->
</el-tree>

然后在你的JavaScript里:

data() {
  return {
    treeData: [
      { id: '1', defaultExpanded: false },
      { id: '2', defaultExpanded: true },
    ],
    // ...
  };
}

相关问题

el-tree，设置expand-on-click-node = false，如何使点击箭头图标时，触发node-click

您可以使用 `@click` 事件监听箭头图标的点击，然后在事件处理程序中触发 `node-click` 事件。具体的代码示例如下：

<el-tree
  :data="treeData"
  :expand-on-click-node="false"
  @node-click="handleNodeClick"
>
  <span slot-scope="{ node, data }">
    <span v-if="node.isLeaf" class="el-tree-node__expand-icon">
      <i class="el-icon-arrow-right" @click="triggerNodeClick(node, data)"></i>
    </span>
  </span>
</el-tree>

methods: {
  handleNodeClick(nodeData) {
    // 处理节点点击事件的逻辑
    console.log('Node clicked:', nodeData);
  },
  triggerNodeClick(node, data) {
    // 触发 node-click 事件
    this.$emit('node-click', node, data);
  }
}

在上面的代码中，我们在箭头图标上添加了 `@click` 事件监听，并调用 `triggerNodeClick` 方法来触发 `node-click` 事件。这样，当点击箭头图标时，会触发 `node-click` 事件，并执行 `handleNodeClick` 方法来处理节点点击的逻辑。

el-tree，设置expand-on-click-node = false，如何对原生的箭头图标增加点击事件

对于 el-tree 组件，设置 `expand-on-click-node` 为 `false`，意味着点击节点时不会自动展开或折叠子节点。如果你想要对原生的箭头图标增加点击事件，可以通过自定义节点的 `render-content` 属性来实现。

首先，你需要在 el-tree 的节点中设置一个自定义的内容，使用 `render-content` 属性。然后，你可以在这个自定义内容中添加一个点击事件，并在事件处理程序中执行你的逻辑。

下面是一个示例代码：

<el-tree :data="treeData" :expand-on-click-node="false">
  <template #default="{ node, data }">
    <span @click="handleArrowClick(node)">
      <i v-if="node.children && node.children.length" class="el-icon-caret-right" :class="{ 'is-expanded': node.expanded, 'is-expanded-no-children': !node.expanded && !node.children }"></i>
      {{ data.label }}
    </span>
  </template>
</el-tree>

在上述代码中，我们使用了 `@click` 绑定了一个点击事件到箭头图标的容器元素上，并调用了 `handleArrowClick` 方法来处理点击事件。你可以在 `handleArrowClick` 方法中编写你希望执行的逻辑。

注意，我们还根据节点的展开状态和是否有子节点来动态地添加了不同的类名，以实现箭头图标的样式变化。

希望这个示例能帮助到你！