ElementUI 自定义 Tree 树形控件背景；Tree 树形菜单组件

原创

已于 2023-12-21 10:46:02 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

于 2023-11-02 20:00:00 首次发布

文章介绍了如何在Vue项目中使用el-tree组件创建自定义树形菜单，包括数据结构、模板和CSS样式定制，以及处理节点点击事件的方法。

自定义 Tree 树形控件背景

在 template 中

<div class="tree-box">
  <el-tree :data="treeList" :props="defaultProps" accordion @node-click="handleNodeClick" />
</div>

在 script 中

treeList: [
  { id: "-1", label: "区域选择" },
  { id: "0", label: "全市" },
  {
    id: "1",
    label: "南明区",
    children: [{ id: "1-1", label: "花果园" }]
  },
  {
    id: "2",
    label: "观山湖区",
    children: [
      { id: "2-1", label: "长岭街道办" },
      { id: "2-2", label: "金阳街道办" },
      { id: "2-3", label: "金华镇" },
      { id: "2-4", label: "金华园街道办" }
    ]
  }
],
defaultProps: { children: "children", label: "label" },