el-tree 默认选中第一项

加载树结构默认选中第一项：设置` :default-expanded-keys  `没用

原因：数据需要在加载以后再次异步更新一下视图

this.$nextTick(() => { });

 代码如下

        <el-tree
           class="filter-tree"
          node-key="id"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          default-expand-all
          highlight-current
          :default-expanded-keys="checkDefault"
          @node-click="handleNodeClick"
          ref="tree"
        >
        </el-tree>

export default {    

data(){
     return {
        data:[],
        checkDefault: [],
        selectNodeId:0
    }
},
watch: {
    filterText(val) {
      //   this.$refs.tree.filter(val);
      this.$refs.tree.filter(val);
    },
    // 监听并异步更新视图  两个都有用
    checkDefault: function (newVal, oldVal) {
      if (newVal) {
        this.$nextTick(() => {
          //   document.querySelector(".el-tree-node__content").click();
          this.$refs.tree.setCurrentKey(this.selectNodeId); // 默认选中节点第一个
        });
      }
    },
},
created(){
      axios
      .get("http://xxxxxxxx/api/yydictdatacategorys")
      .then((res) => {
        this.data = res;
        this.checkDefault.push(this.data[0].id);
        this.selectNodeId = this.data[0].id
      });
}

}