avue-tree树型控件全选/全不选用法一例

显示效果：

Vue界面html脚本

<template>
  <div>
    <el-button type="primary" @click="checkALL">全选/全不选</el-button>
    <el-button type="primary" @click="save"
      style="left: 200px; top: 20px; position: absolute; z-index:9999">保存</el-button>
    <avue-tree ref="menuTree" :option="option" :data="treeData"   multiple
         v-model="form" @check-change="checkChange" class="width:100%,height:calc(100% - 40px);">
    </avue-tree>
 </div>
</template>

Vue界面javascript脚本

data() {
    
    
    return {
    
          
      treeData:[],
      isALLCheck:false,
      //      
      option: {
    
    
        defaultExpandAll: true,
        multiple: true,
        filter: false,
        menu: false,
        formOption: {
    
    
          labelWidth: 100,
          column: [{
    
    
            label: '自定义项',
            prop: 'label'
          }, {
    
    
            label: '测试',
            prop: 'test'
          }],
        }
      }
    }
  },
    /**
     * 全选/全不选
     */
    checkALL()
    {
    
    
      //console.log('menuTree',this.$refs.menuTree);      
      this.isALLCheck=!this.isALLCheck;
      var data=this.$refs.menuTree.data;      
      for(var i=0;i<data.length;i++)
      {
    
    
         this.$refs.menuTree.setChecked(data[i],this.isALLCheck,true);         
      }
    },
    /**
     * 保存功能
     */
    save() {
    
    
      var that = this;
      //
      this.roleId;
      debugger
      //
      console.log('menuTree',this.$refs.menuTree);
      var data=this.$refs.menuTree.getCheckedNodes();
      for(var i=0;i<data.length;i++)
      {
    
    
         var checked=data[i];
         console.log(checked);
      }
      //
    },

—the—end—