elementUI使用记录一：树形控件el-tree设置默认展开和选中样式修改

在Element UI中，您可以使用default-expanded-keys属性来设置树形控件el-tree的默认展开节点，使用highlight-current属性来启用高亮当前选中节点的功能，并通过current-node-key属性来指定当前选中节点的键值。

以下是一个简单的例子，展示如何设置默认展开节点和选中样式：

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    :default-expanded-keys="defaultExpandedKeys"
    :highlight-current="true"
    :current-node-key="currentNodeKey"
    @node-click="handleNodeClick"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        { id: 1, label: '节点1', children: [{ id: 2, label: '节点1-1' }] },
        { id: 3, label: '节点2', children: [{ id: 4, label: '节点2-1' }] }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultExpandedKeys: [1], // 默认展开的节点id数组
      currentNodeKey: 2 // 当前选中节点的id
    };
  },
  methods: {
    handleNodeClick(data, node, self) {
      // 节点点击事件的处理函数
      console.log(data, node, self);
    }
  }
};
</script>

在这个例子中，defaultExpandedKeys设置为[1]，表示树中ID为1的节点将默认展开。currentNodeKey被设置为2，表示ID为2的节点将默认被选中并高亮显示。当节点被点击时，handleNodeClick方法会被调用，并且你可以在这个方法中添加自己的逻辑。