1. el-tree树的全部展开(折叠)，全选(全不选)，父子联动

目录

1. 准备代码

2. 展开/折叠

3. 全选/全不选

4. 父子联动

---

1. 准备代码

首先准备 el-tree 组件与三个复选框，做好三个复选框的双向绑定和 change 事件

• node-key: 每个树节点用来作为唯一标识的属性，不能不写
• props：label 指定节点标签为节点对象的某个属性值，children 指定子树为节点对象的某个属性值
• show-checkbox: 节点是否可被选择，写了组件会在每个节点前面显示一个复选框供用户选择节点，后续要展开/全选/父子联动，都需要设置 show-checkbox 的值为 true ，不能不写
• data：组件关联的数据，不能不写
• ref: 后续要使用 $refs 来获取 tree 元素，不能不写

<el-form-item label="关联菜单" prop="menuIds">
          <el-checkbox 
            v-model="launch" 
            @change="menuTreeLaunch">展开/折叠</el-checkbox>
          <el-checkbox 
            v-model="selectAll" 
            @change="menuTreeSelectAll">全选/全不选</el-checkbox>
          <el-checkbox 
            v-model="form.menuCheckStrictly" 
            @change="menuTreeLinkage">父子联动</el-checkbox>
          <el-tree 
            ref="tree" 
            :data="menuOptions" 
            :props="{ label: 'name', children: 'children' }"
            show-checkbox 
            node-key="id" 
            :default-checked-keys="form.allSelectedIds"
            :check-strictly="!form.menuCheckStrictly"
            class="tree-border"
          >
          </el-tree>
</el-form-item>

<script>

export default{
    data() {
        return {
            menuOptions:[],      // 全部菜单节点
            launch: false,       // 展开/折叠
            selectAll: false,    // 全选/全不选
            form:{
                menuCheckStrictly:true,    // 是否遵循父子不相互关联 （true为遵循父子不相互关联）
                allSelectedIds:[],        // 全选中的菜单id数组
                halfSelectedIds:[],       // 半选中的菜单id数组
            }
        }
    },
    methods:{
        /** 展开 & 折叠 */
        menuTreeLaunch() {},

        /** 全选 & 全不选 */
        menuTreeSelectAll() {},

        /** 父子联动 */
        menuTreeLinkage() {},
    }
}
</script>

2. 展开/折叠

解析：

• this.$refs.tree 获取 el-tree 元素，
• this.$refs.tree.store.c() 的作用是获取 el-tree 组件的全部节点，store 中包含el-tree 组件的 getCheckedKeys 、setCheckedKeys、_getAllNodes 等全部方法，这一点在官方文档上并未体现，但 element 源码中将方法挂载到 el-tree 的 store 中了，详见源码中 packages\tree\src\model\tree-store.js 文件
• expanded 是 el-tree 节点 的属性，表示是否展开（true为展开）

    /** 展开菜单树 */
    menuTreeLaunch(e) {
      // e 为 true 或 false 表示展开按钮的选中状态

      for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        // 遍历 el-tree 的每个节点，将节点的 expanded 属性设为 true 或 false
        this.$refs.tree.store._getAllNodes()[i].expanded = e
      }
      
    },

3. 全选/全不选

解析：

• 全选就将存储全部节点的数组 menuOptions 作为参数传入 setCheckedNodes 方法，setCheckedNodes 可以设置目前勾选的节点，使用此方法必须设置 node-key 属性
• 全不选就将空数组作为参数传入

   /** 全选菜单树 */
    menuTreeSelectAll(e) {
      // e 为 true 或 false 表示全选按钮的选中状态
      if (e) {
        // 全选
        this.$refs.tree.setCheckedNodes(this.menuOptions)
      } else {
        // 全不选
        this.$refs.tree.setCheckedNodes([])
      }
    },

4. 父子联动

解析：

• check-strictly 表示是否遵循父子不互相关联的做法，true 为遵循，false 为不遵循，默认值为false
• 当联动按钮状态为 true 时，表示想要将 el-tree 组件设置为 不遵循父子不互相关联，也就是设置 check-strictly 的值为 false ，因此联动按钮绑定 v-model = "form.menuCheckStrictly"，el-tree 组件绑定 :check-strictly="!form.menuCheckStrictly"

   <el-checkbox 
       v-model="form.menuCheckStrictly" 
       @change="menuTreeLinkage"
   >
    父子联动
   </el-checkbox>
   <el-tree 
       ref="tree" 
       :data="menuOptions" 
       :prop
       show-checkbox 
       node-key="id" 
       :default-checked-keys="form.allSelectedIds"
       :check-strictly="!form.menuCheckStrictly"
       class="tree-border"
   >
   </el-tree>



    /** 菜单树父子联动 */
    menuTreeLinkage(e) {
      // e 为 true 或 false 表示联动按钮的选中状态
      this.form.menuCheckStrictly = e
    },