elementplus el-tree 初始化默认选中第一个，点击增加选中样式

Element Plus的`el-tree`组件是一个用于展示树状结构的数据列表，如果想要初始化时默认选中第一个节点，并为其添加选中样式，你可以这样做：

1. 首先，在你的Vue项目中，确保已经安装并引入了Element Plus库，然后在你的组件模板中，使用`v-model`绑定数据，这将是你的树节点数据源。

<template>
  <el-tree
    ref="tree"
    :data="treeData" // 树形数据数组
    default-expand-all // 默认展开所有节点
    :props="defaultProps" // 定义节点的属性
    @node-click="handleNodeClick"
  ></el-tree>
</template>

2. 定义初始数据时，将你想默认选中的第一个节点包含在内，并设置`activeNodeId`为该节点的唯一标识：

export default {
  data() {
    return {
      treeData: [
        { id: '1', label: '根节点一', children: [] },
        { id: '2', label: '根节点二', children: [] }, // 其他节点...
        // 将默认选中的节点放在前面
        { id: '0', label: '默认选中节点', children: [], active: true }
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
        disabled: 'disabled'
      }
    };
  },
  methods: {
    handleNodeClick(node) {
      this.$refs.tree.setCheckedKeys([node.id], { expandTrigger: 'click' }); // 设置选中状态
      // 为选中节点添加额外样式，这里假设你有一个名为`selectedNodeStyle`的对象
      node.style = this.selectedNodeStyle;
    }
  }
};

3. 在`handleNodeClick`方法中，当用户点击任一节点时，首先通过`setCheckedKeys`方法设置当前节点为选中状态，并且可以为选中的节点应用自定义样式。

记得根据实际需求调整节点样式部分，可能需要在CSS文件中定义`.el-tree-node.is-checked`的选择器来覆盖默认样式。现在，当你加载页面时，默认选中的节点将会自动呈现选中样式，并且点击其他节点也可以切换样式。