vue单个组件实现无限层级多选菜单_vue 二级菜单多选-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36196162/article/details/79360861

该博客介绍了一个使用Vue构建的单个组件，该组件能够实现无限层级的多选菜单。通过组件通信和Vuex store管理状态，实现从底层菜单到顶层菜单的状态同步。在初始化时，从底层向上层传递状态，而状态改变则更新checkList数组。

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

wTree.vue

原理：每一个多选框都是一个节点，每个节点就是一个wTree组件，有父级（顶级level为0）,有子级（底层list[]是空的），组件之间状态传递是通过组件通信传递，对于外部数据checkList数组的修改是通过store实现的。初始化从底层状态传递到上层，一层一层传递。改变状态，不同状态改变，修改checklist数组。大概就这个思路，下面是代码：

<template>
  <div>
    <div >
      <span v-for="o in levelNum"> </span>
      <i v-if="item.list" :class="open ? openClass : closeClass" @click="showSub" style="color: #00d6b2"></i>
      <span v-else>   </span>
      <span>
        <a @click="changeState">
          <img src="./../assets/selectedAll.png" v-if="selectedState === 'all'" width="15px" height="15px"/>
          <img src="./../assets/selectedSub.png" v-if="selectedState === 'sub'" width="15px" height="15px"/>
          <img src="./../assets/selectedNull.png" v-if="selectedState === 'null'"  width="15px" height="15px"/>
        </a>
      </span>
      <span>{
   {item.name}}</span>
    </div>
    <component v-show="open" :is="node" :item="o" :state="stateSub" v-for="o of item.list" :key="o.key" :level="levelNum" v-on:changeToPar="changeBySub">
    </component>
  </div>
</template>
<script>
  export default {
    name: 'wTree',
    props: ['item', 'level', 'state'],
    data () {