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` 属性将会切换，并且节点的样式也会相应地改变。