vue tree全选

柔光的暖阳◎ 2022-09-02 04:26 143阅读 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 条评论，143人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue 分页记忆勾选数据全选为单页面全选

目录直接复制粘贴（记得把子组件引用上）表格组件页面内容数据全选分页清空页面内容数据全选分页仍然保留 --------------------

绝地灬酷狼/ 2022年09月04日 06:41/ 0 赞/ 268 阅读

相关 vue tree全选

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

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

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

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

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

相关 vue.js单选全选删除

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

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

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

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

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