提升折叠菜单点击效率！Element UI 实现分级菜单自动展开闭合

2023-12-16 07:11:40

使用 Element UI 的树形控件和 vue 插槽可以轻松构建一个分级菜单，点击时自动展开和闭合。这种设计可以提高折叠菜单的点击效率，并减少用户交互的复杂性。下面，我将提供一个分步指南，帮助您构建这样的菜单：

安装必要的库和依赖项
```
npm install element-ui vue
```
创建一个新的 Vue 项目
```
vue create my-project
```
在你的项目中添加 Element UI
```
cd my-project
vue add element-ui
```
创建一个新的 Vue 组件
```
vue create component TreeView
```

在你的 TreeView 组件中，添加以下代码

<template>
  <el-tree
    :data="data"
    @node-click="handleNodeClick"
  />
</template>

<script>
import { ElTree } from 'element-ui'

export default {
  components: { ElTree },
  data() {
    return {
      data: [
        {
          label: 'Parent 1',
          children: [
            { label: 'Child 1-1' },
            { label: 'Child 1-2' }
          ]
        },
        {
          label: 'Parent 2',
          children: [
            { label: 'Child 2-1' },
            { label: 'Child 2-2' }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick(data) {
      data.expanded = !data.expanded
    }
  }
}
</script>

在你的 main.js 文件中，注册 TreeView 组件

import TreeView from './components/TreeView.vue'

Vue.component('tree-view', TreeView)

在你的 App.vue 文件中，使用 TreeView 组件

<template>
  <div id="app">
    <tree-view />
  </div>
</template>

<script>
import TreeView from './components/TreeView.vue'

export default {
  components: { TreeView }
}
</script>