element-ui树节点默认选中

最新推荐文章于 2025-03-06 14:38:38 发布

原创最新推荐文章于 2025-03-06 14:38:38 发布

· 2.6k 阅读

1 ·

版权

文章标签：

#elementui #vue.js #javascript

笔记同时被 2 个专栏收录

16 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文详细介绍了如何在Element UI框架中，使用vue.js和javascript技术，设置并实现树形组件（Tree）的节点默认选中状态。通过理解组件属性和方法，你可以轻松地为你的应用定制交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-tree
            empty-text="暂无组织"
            :data="dptLists" #列表数据
            node-key="dptId" #为查询出来的列表中的属性字段
            :current-node-key="currentLivingId"
            :default-expand-all="true"
            :expand-on-click-node="false"
            :props="defaultProps" #节点配置
            @check-on-click-node="true"
            :highlight-current="true" #高亮显示
            ref="dptTree"
            :default-checked-keys="[1]"  #默认选中的节点
            @node-click="selectEmployees" #点击节点触发的函数
          ></el-tree>

data(){
    return{
        currentLivingId: 0,
        defaultProps: {
            children: "childrenList",
            label: "dptName"
        },
    }
}

    getDptInfo() {
      const wecomDpt = {
        pDptId: 0
      };
      getDptList(wecomDpt)
        .then(res => {
          this.dptLists = res.meta.responseMap.dptList;
          this.currentLivingId = this.dptId == "" ? res.meta.responseMap.dptList[0].dptId : this.dptId;
          this.$nextTick(function () {
            this.$refs["dptTree"].setCurrentKey(this.currentLivingId);
          });
          this.selectEmployee();
        })
        .catch(error => {
          console.log(error);
        });
    },