VUE 实现三级权限选中与全选

神夜大侠

已于 2024-09-02 15:17:58 修改

阅读量279

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-09-02 11:34:46 首次发布

本文链接：https://blog.csdn.net/u012015434/article/details/141815542

版权

功能：点击全选时所有子级选中，点击子级时对应的所有父级要选中。

实现思路：通过递归将所有子级转化为一级，选中时将选中的ID存为一个二级数组。循环时判断当前项在选中的数组中存在时即为勾选状态。

1、所有子级选中：通过递归的形式查找所有子级并且将它保存为一个二维数组，只保存ID即可。this.selectList = [{id:1},{id:2}]

2、所有父级选中：选择某个子级时判断是否有父级，有父级则将所有父级选中，这时候就用到我们一开始的树形结构转化的一级所有节点。

具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VUE实现三级权限复选框</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <style>
    * {
      padding: 0px;
      padding: 0px;
    }

    body {
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div><input type="checkbox" :checked="selectIds.length==allData.length" @change="checkAll"> 全选 </div>
    <div v-for="item in data" :key="item.id">
      <input type="checkbox" :checked="selectIds.some(res=>res.id==item.id)" @change="toggleCheckbox(item)">
      <label>{{ item.name }}</label>
      <div style="padding-left:20px;" v-if="item.children">
        <div v-for="child in item.children" :key="child.id">
          <input type="checkbox" :checked="selectIds.some(res=>res.id==child.id)" @change="toggleCheckbox(child)">
          <label>{{ child.name }}</label>
          <div style="display:flex;" v-if="child.children">
            <div style="margin-left:20px;" v-for="grandChild in child.children" :key="grandChild.id">
              <input type="checkbox" :checked="selectIds.some(res=>res.id==grandChild.id)" @change="toggleCheckbox(grandChild)">
              <label>{{ grandChild.name }}</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        data: [
          {
            name: '用户管理',
            id: 1,
            parentId: 0,
            children: [
              {
                id: 2,
                name: '用户列表',
                parentId: 1,
                children: [
                  {
                    id: 3,
                    name: '添加',
                    parentId: 2
                  },
                  {
                    id: 4,
                    name: '删除',
                    parentId: 2
                  },
                  {
                    id: 5,
                    name: '禁用',
                    parentId: 2
                  }
                ]
              },
              {
                id: 6,
                name: '积分列表',
                parentId: 1,
                children: [
                  {
                    id: 7,
                    name: '添加',
                    parentId: 6
                  },
                  {
                    id: 8,
                    name: '删除',
                    parentId: 6
                  },
                ]
              }
            ]
          },
          {
            name: '课程管理',
            id: 9,
            parentId: 0,
            children: [
              {
                id: 10,
                name: '课程列表',
                parentId: 9,
                children: [
                  {
                    id: 11,
                    name: '添加',
                    parentId: 10
                  },
                  {
                    id: 12,
                    name: '删除',
                    parentId: 10
                  },
                  {
                    id: 13,
                    name: '禁用',
                    parentId: 10
                  }
                ]
              },
              {
                id: 14,
                name: '课程订单',
                parentId: 9,
                children: [
                  {
                    id: 15,
                    name: '添加',
                    parentId: 14
                  },
                  {
                    id: 16,
                    name: '删除',
                    parentId: 14
                  },
                ]
              }
            ]
          }
        ],
        allData: [],
        selectIds: [],
      },

      mounted() {
        this.getAlldata(this.data);
      },

      methods: {

        //全部转化为一级
        getAlldata(arr) {
          arr.forEach(res => {
            this.allData.push(res)
            if (res.children) {
              this.getAlldata(res.children)
            }
          })
        },

        //全选
        checkAll() {
          let all = this.allData.length == this.selectIds.length
          if (!all) {
            this.selectIds = this.allData.map(res => { return { id: res.id }; })
          } else {
            this.selectIds = []
          }
        },

        //选中
        toggleCheckbox(item) {
          let index = this.selectIds.findIndex(res => { return res.id == item.id })
          let flag = false
          if (index == -1) {
            this.selectIds.push({ id: item.id })
            flag = true
          } else {
            this.selectIds.splice(index, 1)
          }
          if (item.children) {
            this.toggleChildren(item, flag);
          }
          if (item.parentId!=0) {
            this.toggleParents(item.parentId);
          }
        },


        //所有子级选中
        toggleChildren(item, flag) {
          item.children.forEach((child, inx) => {
            if(flag){
              let index = this.selectIds.findIndex(res=>{ return res.id==child.id})
              if(index==-1){
                this.selectIds.push({id:child.id})
              }
            }else{
              this.selectIds.forEach((res,index)=>{
                if(res.id==child.id){ this.selectIds.splice(index, 1);  }
              })
            }
            if (child.children) {
              this.toggleChildren(child, flag);
            }
          });
        },

        //选中子级时递归查找父级选中
        toggleParents(parentId) {
          let arr = this.allData
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].id == parentId) {
              let index = this.selectIds.findIndex(res => { return res.id == arr[i].id })
              if (index == -1) { this.selectIds.push({ id: arr[i].id }); }
              if (arr[i].children) {
                this.toggleParents(arr[i].parentId)
              }
            }
          }
        },

      }
    });
  </script>
</body>

</html>