elementUI树节点全选,反选,半选状态

javascript 复制代码
// <template>部分
<div class="check-block">
        <el-divider></el-divider>
        <el-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-divider></el-divider>
        <el-tree :data="templateList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" @check="changeCheck">
        </el-tree>
      </div>


data(){
    return {
        indeterminate: false,
        checkAll: false,
        templateList: [],
        treeData: [],
    }
},
methods:{
handleCheckAllChange() {
      if (this.checkAll) {
        for (let i = 0; i < this.templateList.length; i++) {
          if (this.$refs.tree.getNode(this.templateList[i]).disabled == false) {
            this.$refs.tree.setChecked(this.templateList[i].id, true, true);
          }
        }
        this.treeData = this.$refs.tree
          .getCheckedNodes(false, true)
          .map((i) => i.id);
        this.indeterminate = false;
      } else {
        this.$refs.tree.setCheckedNodes([]);
        this.treeData = [];
        this.indeterminate = false;
      }
    },
    changeCheck() {
      this.treeData = this.$refs.tree
        .getCheckedNodes(false, true)
        .map((i) => i.id);
      let arr = [];
      // treeData是所有的节点,templateList是所有父节点,所以还需要遍历treeData取出父节点再将length和templateList做比较
      this.treeData.map((item) => {
        if (this.$refs.tree.getNode(item).isLeaf == false) {
          arr.push(item);
        }
      });
      if (arr.length) {
        if (arr.length == this.templateList.length) {
          this.checkAll = true;
          this.indeterminate = false;
        } else if (arr.length < this.templateList.length) {
          console.log(1111);
          this.checkAll = false;
          this.indeterminate = true;
        } else {
          this.checkAll = false;
          this.indeterminate = false;
        }
      }
    },

}
相关推荐
程序媛小果6 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长10 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
吕彬-前端42 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱44 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js