vue+elementUI实现el-tree默认选中第一层级的第一个节点

项目场景：

查询成绩时，按照左侧年级和班级树来查询学生成绩
默认选中第一层级下的第一个节点
并给出选中样式

---

问题描述：

此图为el-tree官方文档给出的数据，数据为对应的id、label、children

该项目数据为接口返回，并且返回的数据格式并不是像el-tree提供的那么规整，需要自己组装

---

组装数据：

规整数据，统一保持相同的名称，使用replace替换成label和id
id为整个字段唯一的，不能把年级的id也进行替换，因为会重复
如果不需要默认展开第一个层级下的第一个节点，id可不用替换，

     this.gradeTree = JSON.parse(
              JSON.stringify(data)
                .replace(/gradeName|className/g, 'label')
                .replace(/classId/g, 'id')
            );

默认传进去的数据为defaultProps

 defaultProps: {
        children: 'classList',
        label: 'label'
      },

默认展开第一层级下的第一个节点，就要使用default-expanded-keys和node-key（上面替换的id）
如果只是想选中第一层级并不选中第一层级下的任何节点，在watch的时候querySelector选中.el-tree-node__content即可

 expandDefault: [], //默认选中第一项
 
 this.expandDefault.push(this.gradeTree[0].classList[0].id);

 watch: {
    expandDefault(newVal, oldVal) {
      if (newVal) {
        this.$nextTick(() => {
          document
            .querySelector('.el-tree-node__children .el-tree-node__content')
            .click();
        });
      }
    }
  }

---

完整代码：

 <el-tree
          ref="tree"
          :data="gradeTree"
          :props="defaultProps"
          accordion
          @node-click="handleNodeClick"
          highlight-current
          node-key="id"
          :default-expanded-keys="expandDefault"
        ></el-tree>

 expandDefault: [], //默认选中第一项
      gradeTree: [], // 左侧年级树
      defaultProps: {
        children: 'classList',
        label: 'label'
      },

 // 查询左侧年级树
    getGradeTree() {
      return new Promise((resolve, reject) => {
        const { examId } = this;
        let params = {
          examId
        };
        service
          .getGradeTree(params)
          .then(data => {
            data = data.data;
            this.gradeList = data;
            this.gradeTree = JSON.parse(
              JSON.stringify(data)
                .replace(/gradeName|className/g, 'label')
                .replace(/classId/g, 'id')
            );
            this.expandDefault.push(this.gradeTree[0].classList[0].id);

            resolve(data);
          })
          .catch(err => {
            console.log(err);
            reject(err);
          });
      });
    },

 // 获取列表的方法
 getStudentScoreList(){}

 // 切换左侧选项的方法（因为替换了id，所以就没有classId了,可以自己打印了data看下）
 handleNodeClick(data) {
      this.searchInfo.studentNum = '';
      this.searchInfo.studentName = '';
      this.tableData.pageNum = 1;
      this.$refs.pagination.curPage = 1;
      if (data.id) {
        this.tempClassInfo = {};
        this.gradeList.forEach(item => {
          if (item.gradeCode === data.gradeCode) {
            this.gradeName = item.gradeName;
          }
        });
        this.tempClassInfo = data;
        this.className = data.label;
        this.getStudentScoreList();
      }
    },
    
// 为了选中第一层级下的第一个节点
watch: {
    expandDefault(newVal, oldVal) {
      if (newVal) {
        this.$nextTick(() => {
          document
            .querySelector('.el-tree-node__children .el-tree-node__content')
            .click();
        });
      }
    }
  }

// 修改选中的样式
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #368fff;
}

以上，可根据自己的数据结构进行组装和修改
最重要：在开发前跟后台定义好数据的格式！！！