el-tree 默认选中第一个数据

原创已于 2023-08-24 14:09:56 修改 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

于 2023-08-24 14:04:53 首次发布

vue 同时被 2 个专栏收录

71 篇文章

订阅专栏

elementui

49 篇文章

订阅专栏

该代码片段展示了如何使用API获取数据并初始化一个ElementUI的el-tree组件，设置了默认展开所有节点，高亮当前节点，以及处理节点点击事件。

/**
     * 初始化左侧树
     * @param {*} GetDataLists
     */
    SetTreeDatas() {
      let _this = this;
      _this.$API.SysDictDataGetLeftdata().then((res) => {
        _this.treeData = res.data.data; //给树赋值
        this.$nextTick(() => {
          this.$refs.treeList &&
            this.$refs.treeList.setCurrentKey(this.treeData[0].ID); //默认选中第一条
          this.handleNodeClick(this.treeData[0]); //同时调用树点击事件
        });
      });
    },







<el-tree
style="height: 40rem"
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
node-key="ID"
default-expand-all
highlight-current
:key="itemKey"
ref="treeList"></el-tree>