elementPlus树状组件默认选中

最新推荐文章于 2025-05-29 16:31:44 发布

原创最新推荐文章于 2025-05-29 16:31:44 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #elementui

技术分享同时被 2 个专栏收录

26 篇文章

订阅专栏

个人学习

26 篇文章

订阅专栏

本文介绍如何利用Element UI库中的树形组件构建并操作数据。通过定义节点的属性和事件处理函数，实现了树形结构的数据展示及交互功能。

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

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
    highlight-current
    node-key="id"
    current-node-key="1"
  />
</template>

<script lang="ts" setup>
interface Tree {
  label: string;
  children?: Tree[];
  id?: string;
}

const handleNodeClick = (data: Tree) => {
  console.log(data);
};

const data: Tree[] = [
  {
    label: "Level one 1",
    id: "1",
  },
  {
    label: "Level one 2",
    id: "2",
  },
  {
    label: "Level one 3",
    id: "3",
  },
];

const defaultProps = {
  children: "children",
  label: "label",
  id: "id",
};
</script>

node-key="id"是唯一标识

current-node-key="1"是当前选中，可以用来设置默认选中