el-tree 设置默认值

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

Beam007

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

阅读量3.1k

点赞数 1

分类专栏： element

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/119823719

版权

element 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在el-tree组件中设置默认值，包括单选树和多选树的配置方法，提供了相应的代码示例。

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

一、el-tree单选树设置默认值

代码：

<!-- 单选树 -->
<el-tree ref="tree" :data="treeMenus" :props="defaultProps" accordion @node-click="handleNodeClick" :node-key="nodeId" :filter-node-method="filterNode" highlight-current :expand-on-click-node="true" :default-expanded-keys="[defaultId]">
  <span class="span-ellipsis" slot-scope="{ node }">
    <span :title="node.label">{{ node.label }}</span>
  </span>
</el-tree>

created () {
  // 给单选树赋默认值
  if (this.setDefultId !== undefined) {
    this.defaultId = this.setDefultId
  }
},
updated () {
  // 给单选树设置默认值
  if (this.setDefultId !== undefined) {
    this.defaultId = this.setDefultId // 这个用于展开树到高亮的节点
    this.$nextTick(() => {
      this.$refs.tree.setCurrentKey(this.defaultId) // 这个才是高亮的关键啊
    })
  }
},

二、el-tree多选树设置默认值

代码：

<!-- 多选树 -->
<el-tree ref="tree" :data="treeMenus" :props="defaultProps" :show-checkbox="true" :node-key="nodeId" :filter-node-method="filterNode" highlight-current :expand-on-click-node="false" :default-checked-keys="checkedId" :check-strictly="isStrict" @check="clickDeal">
  <span class="span-ellipsis" slot-scope="{ node }">
    <span :title="node.label">{{ node.label }}</span>
  </span>
</el-tree>

updated () {
  // 给多选树设置默认值
  if (this.checkedId !== undefined) {
    this.$refs.tree.setCheckedKeys(this.checkedId)
  }
},