点击el-tree节点切换内容

您可以使用 el-tree 的 @node-click 事件来监听节点的点击事件，然后在事件处理程序中更改相应的内容。例如，您可以将节点的数据存储在组件的数据属性中，然后在点击事件中更新组件的显示内容。

相关问题

动态控制el-tree节点展开和关闭

在使用 Element UI 的 Tree 组件时，可以通过 `default-expand-all` 或者 `default-expanded-keys` 属性来设置默认展开的节点，但是如果需要动态控制节点的展开和关闭，需要进行以下操作：

1. 在树形结构数据中添加一个 `children` 属性，表示当前节点的子节点
2. 在 `el-tree` 的 `node-click` 事件中调用 `loadNode` 方法，加载当前节点的子节点数据
3. 在 `el-tree` 的 `expand-change` 事件中更新当前节点的 `children` 属性为新的子节点数据
4. 在 `el-tree` 的 `render-content` 事件中判断当前节点是否含有子节点，如果有则渲染展开/关闭图标

以下是一个简单的示例代码：

<template>
  <el-tree :data="treeData" :render-content="renderContent" :load="loadNode" @node-click="handleNodeClick" @expand-change="handleExpandChange"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '节点1',
          isLeaf: false,
          children: []
        }
      ]
    }
  },
  methods: {
    loadNode(node, resolve) {
      // 加载子节点数据
      setTimeout(() => {
        resolve([
          { id: 2, label: '子节点1', isLeaf: true },
          { id: 3, label: '子节点2', isLeaf: true },
          { id: 4, label: '子节点3', isLeaf: true }
        ])
      }, 1000)
    },
    handleNodeClick(node) {
      // 点击节点时展开/关闭节点
      this.$refs.tree.toggleNode(node)
    },
    handleExpandChange(node, expanded) {
      // 更新节点的子节点数据
      if (expanded) {
        this.loadNode(node, (children) => {
          this.$set(node, 'children', children)
        })
      } else {
        this.$set(node, 'children', [])
      }
    },
    renderContent(h, { node, data }) {
      // 自定义节点内容，包括展开/关闭图标
      const hasChildren = data.children && data.children.length
      const expandIcon = node.expanded ? 'el-icon-minus' : 'el-icon-plus'
      return (
        <span>
          <i class={'el-icon-caret-right' + (hasChildren ? ' has-children ' + expandIcon : '')}></i>
          {data.label}
        </span>
      )
    }
  }
}
</script>

在这个示例中，我们定义了一个树形结构的数据 `treeData`，其中每个节点包含一个 `children` 属性，表示当前节点的子节点。在 `el-tree` 的 `node-click` 事件中调用 `toggleNode` 方法切换节点的展开状态，然后在 `el-tree` 的 `expand-change` 事件中根据节点的展开状态加载或清空子节点数据。在 `el-tree` 的 `render-content` 事件中判断当前节点是否含有子节点，如果有则渲染展开/关闭图标。

el-tree点击节点选中和取消选中

在 el-tree 中，要实现点击节点选中和取消选中的功能，你可以按照以下步骤进行操作：

1. 首先，为每个节点添加一个额外的属性来记录其选中状态。你可以在数据源中为每个节点对象添加一个名为 `checked` 的属性，并将其初始值设置为 `false`。

2. 在 el-tree 的 `node-click` 事件中，切换节点的选中状态。你可以通过监听 `node-click` 事件来获取点击的节点对象，并在事件处理程序中切换 `checked` 属性的值。例如，你可以使用以下代码：

<el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>

methods: {
  handleNodeClick(data) {
    data.checked = !data.checked;
  }
}

3. 在 el-tree 的节点模板中，根据节点的选中状态来设置相应的样式。你可以使用 `:class` 绑定动态类名，根据节点的 `checked` 属性来判断是否添加一个表示选中状态的类名。例如，你可以使用以下代码：

<el-tree :data="treeData" :props="{ 'class': 'custom-node' }" @node-click="handleNodeClick">
  <template v-slot="{ node }">
    <span :class="{'custom-node-selected': node.checked}">{{ node.label }}</span>
  </template>
</el-tree>

.custom-node-selected {
  background-color: #e0f0ff;
}

通过以上步骤，你就可以实现 el-tree 中点击节点选中和取消选中的功能了。每当你点击一个节点时，它的 `checked` 属性将会切换，并且节点的样式也会相应地改变。