el-tree组件

使用的是组ElementUI件库,实现全选反选展开折叠功能

效果图：

实现步骤：安装elementUI步骤略过，根据需要粘贴代码

1.  

   <template>
     <div>
       <div>
         <el-button type="primary" @click="onExpand"
           >{{ this.expandAll ? "收缩" : "展开" }}所有节点</el-button
         >
         <el-tree
           :data="data"
           ref="tree"
           show-checkbox
           node-key="id"
           class="auth-tree"
           :default-checked-keys="current"
           @check="handleCheck"
         ></el-tree>
       </div>
     </div>
   </template>

    

2.  

   <script>
   export default {
     data() {
       return {
         expandAll: false,
         current: [21, 31],
         data: [
           {
             label: "一级 1",
             id: 1,
             children: [
               {
                 label: "二级 1-1",
                 id: 11
               }
             ]
           },
           {
             label: "一级 2",
             id: 2,
             children: [
               {
                 label: "二级 2-1",
                 id: 21
               },
               {
                 label: "二级 2-2",
                 id: 22
               }
             ]
           },
           {
             label: "一级 3",
             id: 3,
             children: [
               {
                 label: "二级 3-1",
                 id: 31
               },
               {
                 label: "二级 3-2",
                 id: 32
               }
             ]
           },
           {
             label: "一级 4",
             id: 4,
             children: [
               {
                 label: "二级 4-1",
                 id: 41
               },
               {
                 label: "二级 4-2",
                 id: 42
               }
             ]
           }
         ],
         arr: []
       }
     },
     methods: {
       //复选框事件
       handleCheck(val, a) {
         if (this.current.includes(val.id)) {
           this.current = this.current.filter((item) => item !== val.id)
         } else {
           this.current.push(val.id)
         }
         console.log(this.current, "current")
       },
       // 节点展开
       async onExpand() {
         try {
           this.expandAll = !this.expandAll
           // 改变每个节点的状态值
           console.log(this.$refs.tree, "this.$refs.tree.store.root")
           this.changeTreeNodeStatus(this.$refs.tree.store.root)
         } catch {}
       },
       // 改变节点的状态值
       changeTreeNodeStatus(node) {
         // console.log(node, "node")
         node.expanded = this.expandAll
         for (let i = 0; i < node.childNodes.length; i++) {
           // 改变节点的自身expanded状态值
           node.childNodes[i].expanded = this.expandAll
           // 递归遍历子节点
           if (node.childNodes[i].childNodes.length > 0) {
             this.changeTreeNodeStatus(node.childNodes[i])
           }
         }
       }
     }
   }
   </script>
   

3. 必不可少，这个样式是将第一层的复选框去掉 

   <style scoped>
   ::v-deep .auth-tree > .el-tree-node > .el-tree-node__content .el-checkbox {
     display: none;
   }
   </style>

4.