vue tree全选

柔光的暖阳◎ 2022-09-02 04:26 157阅读 0赞

trre代码

<div class="checkedBox">
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
              </div>
    
              <el-tree
                :data="permissionsList"
                show-checkbox
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                :default-checked-keys="checkedRoleList"
                @check-change="handleCheckChange"
              >
              </el-tree>

方法

// 全选
        handleCheckAllChange() {
          if (this.checkAll == true) {
            this.$refs.tree.setCheckedNodes(this.permissionsList);
            this.checkedList = this.$refs.tree.getCheckedNodes();
          } else {
            this.$refs.tree.setCheckedKeys([]);
          }
        },
    
      handleCheckChange() {
          // tree 结构转化成一维数组
          const result = [],
            getRoleId = arr => {
              arr.forEach(v => {
                result.push(v.id);
                if (v.children instanceof Array) {
                  getRoleId(v.children)
                }
              });
            }
          getRoleId(this.permissionsList);
          let getCheckedList = this.$refs.tree.getCheckedNodes();
          // 比较
          if (result.length == getCheckedList.length && getCheckedList.length != 0) {
            this.checkAll = true
          } else {
            this.checkAll = false
          }
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 103 阅读

相关 VUE 全选

<div id="vue_det"> <p>全选:</p> <input type="checkbox" id="checkbox" v

朱雀/ 2023年06月11日 12:28/ 0 赞/ 7 阅读

相关 vue2.0 实现全选和全不选

vue2.0 实现全选和全不选实现思路： 1、 v-model 一个收集所有input（除全选框外）数组checkModel ，vue会动态将其checked为t

r囧r小猫/ 2023年02月22日 05:22/ 0 赞/ 17 阅读

相关 el-tree设置全选和全部禁用

首先看看需求： 1，超级管理员，菜单默认全选，且不可点击，全部禁用 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

绝地灬酷狼/ 2022年11月29日 03:15/ 0 赞/ 1342 阅读

相关 el-tree默认展开或折叠，全选或全不选

element-ui中 `tree` 树形控件的相关功能，演示图： ![在这里插入图片描述][2021031111275166.gif] 代码部分： <div

亦凉/ 2022年11月07日 04:29/ 0 赞/ 1183 阅读

相关 Vue el-tree实现单选效果

场景：今天在做项目的时候，前端业务数据设计到树形展示，并需要单选，打开Element，选中 el-tree 组件，但官方文档中只支持多选，并不支持单选，需要

清疚/ 2022年11月05日 06:28/ 0 赞/ 187 阅读

相关 vue tree全选

trre代码 <div class="checkedBox"> <el-checkbox v-model="checkAll" @ch

柔光的暖阳◎/ 2022年09月02日 04:26/ 0 赞/ 158 阅读

相关 vue中el-tree实现单选复选框

vue中el-tree实现单选复选框遇到的问题使用vue的element框架时el-tree时，当填入复选框时，不能单选父节点解决办法结

你的名字/ 2022年04月13日 04:24/ 0 赞/ 422 阅读

相关 vue.js单选全选删除

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

我不是女神ヾ/ 2021年06月26日 16:06/ 0 赞/ 482 阅读

相关 vue实现全选、全不选和部分选择功能

在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具

Dear 丶/ 2021年06月11日 15:12/ 0 赞/ 507 阅读