el-tree组件

最新推荐文章于 2025-08-26 12:27:10 发布

原创

最新推荐文章于 2025-08-26 12:27:10 发布 · 455 阅读

标签

#vue.js #前端 #javascript

收录于

本文介绍了如何使用ElementUI组件库实现树形结构的全选、反选和展开/折叠功能。通过点击按钮，可以控制所有节点的展开和收缩状态，并且展示了复选框选中状态的处理方法。示例代码中包含了一个Vue.js组件，该组件绑定了数据和事件处理方法，用于动态控制树节点的显示和选择状态。

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

效果图：

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

<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>

<script>
export default {
  data() {
    return {
      expandAll: false,
      current: [21, 31],
      data: [
        {
          label: "一级 1",
          id: 1,
          ch