Elemtent多选择框权限控制多选择框

最新推荐文章于 2022-05-27 17:27:51 发布
最新推荐文章于 2022-05-27 17:27:51 发布
阅读量250 收藏 1
点赞数
分类专栏： vue element 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoHelloWord/article/details/120944091
版权
vue 同时被 2 个专栏收录
26 篇文章 1 订阅
订阅专栏
element
14 篇文章 1 订阅
订阅专栏

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
直接上代码

<div>
<div class="JuesCheack">
          <el-collapse accordion>
            <el-collapse-item v-for="(item,index) in newTreeList" :key="index">
              <template slot="title">
                <el-checkbox-group
                  v-for="(betun,betunindex) in item.treeResponse" v-model="betun.chenPost" style="width: 150px;margin-right: 30px;"
                  @change="handleCheckedCitiesChange(betun.name,index,betunindex)">
                  <el-checkbox >{{ betun.name }}</el-checkbox>
                </el-checkbox-group>
              </template>
              <div v-for="(be,indexe) in item.treeResponse[0].subList" :key="indexe" class="chenBeks">
                <el-checkbox-group v-model="be.chenPost" style="width: 150px;margin-right: 30px;" @change="handleCheckZi(index,indexe,item.cheackList)">
                  <el-checkbox :label="be.name" >{{ be.name }}</el-checkbox>
                </el-checkbox-group>
                <el-checkbox-group v-for="(set,setpodindex) in be.subList" :index="setpodindex" v-model="set.chenPost" @change="leCheckZi(index,indexe,setpodindex)">
                  <el-checkbox :label="set.id" :key="set.id">{{ set.name }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
</div>

在data里{
permissions：[]
newTreeList：[]
}

在
methods：{
handleCheckedCitiesChange(cheach, index, index2) {
      if (cheach != '全选') {
        // 点击案件中心让   被询问人，案件管理，宣教记录选中
        if (this.newTreeList[index].treeResponse[index2].chenPost) {
          for (let i = 0; i < this.newTreeList[index].treeResponse[index2].subList.length; i++) {
            this.newTreeList[index].treeResponse[index2].subList[i].chenPost = true
            // 往数组添加选中的id值
            this.permissions.push(this.newTreeList[index].treeResponse[index2].subList[i].id)
            // 用来全选清楚重复的数据
            for (let e = 0; e < this.permissions.length; e++) {
              for (let j = e + 1; j < this.permissions.length; j++) {
                if (this.permissions[e] === this.permissions[j]) {
                  this.permissions.splice(j, 1)
                }
              }
            }
            console.log(this.permissions)
          }
        } else {
          // 点击取消选中，
          for (let i = 0; i < this.newTreeList[index].treeResponse[index2].subList.length; i++) {
            this.newTreeList[index].treeResponse[index2].subList[i].chenPost = false
          }
          // 过滤掉选中的id值
          this.permissions = this.permissions.filter(item => !this.newTreeList[index].treeResponse[index2].subList.some(ele => ele.id === item))
          console.log(this.permissions)
        }
      } else {
        // 点击和案件中心同级的 全部按钮 控制下列进行全部选择和反选
        if (this.newTreeList[index].treeResponse[index2].chenPost) {
          for (let i = 0; i < this.newTreeList[index].treeResponse[0].subList.length; i++) {
            for (let k = 0; k < this.newTreeList[index].treeResponse[0].subList[i].subList.length; k++) {
              if (this.newTreeList[index].treeResponse[0].subList[i].subList[k].name != '全选') {
                this.permissions.push(this.newTreeList[index].treeResponse[0].subList[i].subList[k].id)
                // 用来全选清楚重复的数据
                for (let e = 0; e < this.permissions.length; e++) {
                  for (let j = e + 1; j < this.permissions.length; j++) {
                    if (this.permissions[e] === this.permissions[j]) {
                      this.permissions.splice(j, 1)
                    }
                  }
                }
                console.log(this.permissions)
              }
              this.newTreeList[index].treeResponse[0].subList[i].subList[k].chenPost = true
            }
          }
        } else {
          for (let i = 0; i < this.newTreeList[index].treeResponse[0].subList.length; i++) {
            for (let k = 0; k < this.newTreeList[index].treeResponse[0].subList[i].subList.length; k++) {
              this.newTreeList[index].treeResponse[0].subList[i].subList[k].chenPost = false
              this.permissions = this.permissions.filter(item => !this.newTreeList[index].treeResponse[0].subList[i].subList.some(ele => ele.id === item))
              console.log(this.permissions)
            }
          }
        }
      }
    },
    handleCheckZi(index, index2, item) {
      if (this.newTreeList[index].treeResponse[0].subList[index2].chenPost == true) {
        // 添加单个点击的选中的id
        this.permissions.push(this.newTreeList[index].treeResponse[0].subList[index2].id)
        console.log(this.permissions)
      } else {
        // 过滤单个点击的选中的id
        this.permissions = this.permissions.filter(item => (this.newTreeList[index].treeResponse[0].subList[index2].id != item))
        console.log(this.permissions)
      }
      // 点击被询问人，案件管理，宣教记录。让案件中心选中和不选中
      for (let e = 0; e < this.newTreeList[index].treeResponse[0].subList.length; e++) {
        console.log(this.newTreeList[index].treeResponse[0].subList[e])
        if (this.newTreeList[index].treeResponse[0].subList[e].chenPost == false) {
          this.newTreeList[index].treeResponse[0].chenPost = false
          return
        }
        this.newTreeList[index].treeResponse[0].chenPost = true
      }
    },
    leCheckZi(index, index2, index3) {
      if (this.newTreeList[index].treeResponse[0].subList[index2].subList[index3].name == '全选') {
        let butnch = true
        for (let v = 0; v < this.newTreeList[index].treeResponse[0].subList.length; v++) {
          console.log(this.newTreeList[index].treeResponse[0].subList[v].subList[0])
          if (this.newTreeList[index].treeResponse[0].subList[v].subList[0].chenPost == false) {
            butnch = false
            break
          } else {
            butnch = true
          }
        }
        this.newTreeList[index].treeResponse[1].chenPost = butnch
        if (this.newTreeList[index].treeResponse[0].subList[index2].subList[0].chenPost) {
          for (let j = 0; j < this.newTreeList[index].treeResponse[0].subList[index2].subList.length; j++) {
            // console.log(this.newTreeList[index].treeResponse[0].subList[index2].subList[j])
            if (this.newTreeList[index].treeResponse[0].subList[index2].subList[j].name != '全选') {
              this.permissions.push(this.newTreeList[index].treeResponse[0].subList[index2].subList[j].id)
              // 用来全选清楚重复的数据
              for (let e = 0; e < this.permissions.length; e++) {
                for (let j = e + 1; j < this.permissions.length; j++) {
                  if (this.permissions[e] === this.permissions[j]) {
                    this.permissions.splice(j, 1)
                  }
                }
              }
              console.log(this.permissions)
            }
            this.newTreeList[index].treeResponse[0].subList[index2].subList[j].chenPost = true
          }
        } else {
          for (let j = 0; j < this.newTreeList[index].treeResponse[0].subList[index2].subList.length; j++) {
            this.newTreeList[index].treeResponse[0].subList[index2].subList[j].chenPost = false
            this.permissions = this.permissions.filter(item => !this.newTreeList[index].treeResponse[0].subList[index2].subList.some(ele => ele.id === item))
            console.log(this.permissions)
          }
        }
      } else {
        if (this.newTreeList[index].treeResponse[0].subList[index2].subList[index3].chenPost == true) {
          this.permissions.push(this.newTreeList[index].treeResponse[0].subList[index2].subList[index3].id)
          console.log(this.permissions)
        } else {
          this.permissions = this.permissions.filter(item => (this.newTreeList[index].treeResponse[0].subList[index2].subList[index3].id != item))
          console.log(this.permissions)
        }
        let chensj = true
        for (let a = 0; a < this.newTreeList[index].treeResponse[0].subList[index2].subList.length; a++) {
          console.log(this.newTreeList[index].treeResponse[0].subList[index2].subList[a])
          if (this.newTreeList[index].treeResponse[0].subList[index2].subList[a].name != '全选') {
            if (this.newTreeList[index].treeResponse[0].subList[index2].subList[a].chenPost == false) {
              chensj = false
              break
            } else {
              chensj = true
            }
          }
        }
        this.newTreeList[index].treeResponse[0].subList[index2].subList[0].chenPost = chensj
      }
    },

}




数据格式
{
    "code":"S000",
    "msg":"成功",
    "data":{
        "list":[
            {
                "treeResponse":[
                    {
                        "id":2,
                        "name":"案件中心",
                        "code":"11000000",
                        "chenPost":false,
                        "subList":[
                            {
                                "id":14,
                                "name":"被询问人登记",
                                "code":"11010000",
                                "chenPost":false,
                                "subList":[
                                    {
                                        "id":-1,
                                        "name":"全选",
                                        "code":null,
                                        "chenPost":false,
                                        "subList":null
                                    },
                                    {
                                        "id":17,
                                        "name":"新增",
                                        "code":"11010200",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":18,
                                        "name":"详情",
                                        "code":"11010300",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":19,
                                        "name":"删除",
                                        "code":"11010400",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":20,
                                        "name":"编辑",
                                        "code":"11010500",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    }
                                ]
                            },
                            {
                                "id":26,
                                "name":"案件管理",
                                "code":"11020000",
                                "chenPost":false,
                                "subList":[
                                    {
                                        "id":-1,
                                        "name":"全选",
                                        "code":null,
                                        "chenPost":false,
                                        "subList":null
                                    },
                                    {
                                        "id":29,
                                        "name":"新增",
                                        "code":"11020200",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":30,
                                        "name":"详情",
                                        "code":"11020300",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":31,
                                        "name":"删除",
                                        "code":"11020400",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    }
                                ]
                            },
                            {
                                "id":47,
                                "name":"宣教记录",
                                "code":"11030000",
                                "chenPost":false,
                                "subList":[
                                    {
                                        "id":-1,
                                        "name":"全选",
                                        "code":null,
                                        "chenPost":false,
                                        "subList":null
                                    },
                                    {
                                        "id":50,
                                        "name":"新增",
                                        "code":"11030200",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":51,
                                        "name":"详情",
                                        "code":"11030300",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":52,
                                        "name":"删除",
                                        "code":"11030400",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":53,
                                        "name":"编辑",
                                        "code":"11030500",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "id":null,
                        "name":"全选",
                        "code":null,
                        "chenPost":false,
                        "subList":null
                    }
                ]
            },
            {
                "treeResponse":[
                    {
                        "id":3,
                        "name":"询问中心",
                        "code":"12000000",
                        "chenPost":false,
                        "subList":[
                            {
                                "id":126,
                                "name":"笔录模板制作",
                                "code":"12010000",
                                "chenPost":false,
                                "subList":[
                                    {
                                        "id":-1,
                                        "name":"全选",
                                        "code":null,
                                        "chenPost":false,
                                        "subList":null
                                    },
                                    {
                                        "id":127,
                                        "name":"列表",
                                        "code":"12010100",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":128,
                                        "name":"新增",
                                        "code":"12010200",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":129,
                                        "name":"删除",
                                        "code":"12010300",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":130,
                                        "name":"编辑",
                                        "code":"12010400",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    }
                                ]
                            },
                            {
                                "id":132,
                                "name":"权力义务告知书数据",
                                "code":"12020000",
                                "chenPost":false,
                                "subList":[
                                    {
                                        "id":-1,
                                        "name":"全选",
                                        "code":null,
                                        "chenPost":false,
                                        "subList":null
                                    },
                                    {
                                        "id":133,
                                        "name":"列表",
                                        "code":"12020100",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":134,
                                        "name":"新增",
                                        "code":"12020200",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":135,
                                        "name":"删除",
                                        "code":"12020300",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    },
                                    {
                                        "id":136,
                                        "name":"编辑",
                                        "code":"12020400",
                                        "chenPost":false,
                                        "subList":[

                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "id":null,
                        "name":"全选",
                        "code":null,
                        "chenPost":false,
                        "subList":null
                    }
                ]
            },
            {
                "treeResponse":[
                    {
                        "id":4,
                        "name":"集体议案",
                        "code":"13000000",
                        "chenPost":false,
                        "subList":[

                        ]
                    },
                    {
                        "id":null,
                        "name":"全选",
                        "code":null,
                        "chenPost":false,
                        "subList":null
                    }
                ]
            },
            {
                "treeResponse":[
                    {
                        "id":5,
                        "name":"听证",
                        "code":"14000000",
                        "chenPost":false,
                        "subList":[

                        ]
                    },
                    {
                        "id":null,
                        "name":"全选",
                        "code":null,
                        "chenPost":false,
                        "subList":null
                    }
                ]
            },
            {
                "treeResponse":[
                    {
                        "id":6,
                        "name":"组织架构",
                        "code":"15000000",
                        "chenPost":false,
                        "subList":[

                        ]
                    },
                    {
                        "id":null,
                        "name":"全选",
                        "code":null,
                        "chenPost":false,
                        "subList":null
                    }
                ]
            },
            {
                "treeResponse":[
                    {
                        "id":7,
                        "name":"装备中心",
                        "code":"16000000",
                        "chenPost":false,
                        "subList":[

                        ]
                    },
                    {
                        "id":null,
                        "name":"全选",
                        "code":null,
                        "chenPost":false,
                        "subList":null
                    }
                ]
            },
            {
                "treeResponse":[
                    {
                        "id":8,
                        "name":"设备管理",
                        "code":"17000000",
                        "chenPost":false,
                        "subList":[

                        ]
                    },
                    {
                        "id":null,
                        "name":"全选",
                        "code":null,
                        "chenPost":false,
                        "subList":null
                    }
                ]
            }
        ]
    }
}
真的不想哇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
表单checkbox多选框选择特效
04-06
表单checkbox多选框选择特效是一款多选框美化特效。
Element-UI级联(cascader)实现权限管理
weixin_42592879的博客
09-26 1923
Element-UI级联实现权限管理 最近在用element-ui练习项目重构，为了实现权限管理这个模块，花了不少功夫。 文章目录Element-UI级联实现权限管理1.实现效果1.element-ui的级联1.选择组件2.配置组件总结 1.实现效果 这里是对角色的管理，可以修改删除和授权，修改是修改名字，删除就是删除角色。主要难点在于如何实现授权这个功能，点击授权之后，首先要获得后台的权限数据，如果有授权有层级，还有显示出层级效果，并且要根据用户的不同，默认选中其拥有的权限。 1.element-
学习日记--多选框样式自定义修改
轻风细雨_林木木
02-14 587
/*多选框的样式修改*/ input[type=checkbox] { -webkit-appearance: none; /*这个属性是将input标签变成一个可修改样式的普通标签，目前有谷歌和火狐浏览器支持*/ -moz-appearance: none; width: 11px; border-radius: 2px; ...
ele 多选框实现三级联动权限管理
wqnmlgbsz的博客
04-01 249
<template> <el-form label-width="200px"> <el-button @click="aa">点击我打印结果</el-button> <el-form-item v-for="v1 in list" :key="v1.id" style="border-top: 1px solid red;padding-left: 24px;"> <el-c.
后台系统，多组复选框问题
weixin_45426989的博客
11-07 516
后台系统，多组复选框问题 在后台系统中，有一个权限管理的逻辑，需要多组复选框展示多组权限，再用vue简单的渲染后，点击其中一组的全选会让所有组的权限全选。在网上查询一番后，将一组复选框写成一个子组件，在从后端得到数据，将数据传到权限子组件中，可以避免多组复选框的问题。 <Row class="bottom-list" v-for="(item, key) in roleList" :key=...
权限复选框
04-27
多级权限复选框 ，复选框—上下级关系。可以多级连选
下拉框选择权限
I_try的博客
05-27 709
1.下拉框某option不可选 <select> <option ... disabled selected ...>Select your option</option> </select> 2.整个下拉框 很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。只要元素里面设置了disabled=“xxx”不管里面为什么都为禁用。 所以原生设置： 禁用下拉框--dom.setA
权限菜单 复选框的选择和反选
06-07
得到用户对应的权限，并且可以增加，删除用户的权限，对用户权限进行复选框的勾选和反选
多选框级联权限保存
★昔梦无痕★
03-05 694
function save_menu_auth(userid,url) { var p_tmp = []; $('[name="bigmenu_chk"]:checked').each(function(){ var _this = $(this); var _tmp = {}; var pid = _this.val(); _tmp.did = pid; _tmp.son
权限分配（级联复选框操作）
探索者的专栏
01-06 1192
页面前台                     function CheckRoleName() {             var roleName = $("#txtRoleName").val();             if (roleName == "") {                 alert("角色名称不能为空!");
好看的菜单权限分配样式.zip
08-13
非常漂亮的菜单权限分配页面样式，所有的系统都用得上。。。各浏览器兼容
C++ 多文件/多目录选择 选择框
10-20
C++ 多文件/多目录选择的选择框，如果在调试模式下，出现的选择框不对，那么请运行exe文件，就可以了，很奇怪的问题，请各位高手告知问题所在
微信小程序使用checkbox显示多项选择框功能【附源码下载】
08-28
主要介绍了微信小程序使用checkbox显示多项选择框功能,涉及相关事件绑定与元素遍历操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
易语言超级列表框选择多项内容
07-22
易语言超级列表框选择多项内容源码,超级列表框选择多项内容,列表选中
UIAlertView 提示框 多项选择
04-16
UIAlertView 提示框 多项选择
element DatePicker 日期选择器多选模式触发点击时间事件
xiaoHelloWord的博客
06-04 8721
这里有个功能，当点击时间或者取消选择时间，要触发事件来进行操作。但是当时间组件type为dates时就不能点击触发chang事件，点击确定按钮才会触发。 这里在是对这个进行监听来触发事件 <el-date-picker v-model="shangkedata" type="dates" clearable placeholder="选择日期" format="yyyy - MM - dd" value-format="yy
VUE生成PDF
xiaoHelloWord的博客
05-27 6481
生成pdf可自动分页生成多页 npm install --save html2canvas npm install jspdf --save pdf.js // 导出页面为PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default{ install (Vue, options) { Vue.prototype.getPdf = function () { var title
天地图区域行政区划
xiaoHelloWord的博客
04-11 4919
我这边的写法是通过每个城市的orgID 如浙江省是330000，getEdgeMapInfo获取下面相对应的城市 然后通过接口返回的json数据 去请求json文件夹获取数据 drawLine(id) { let style = { color: 'blue', weight: 3, opacity: 1, lineStyle: 'dashed', // 虚线 fillColor: 'tr..
element 循环动态Checkbox 多选框
xiaoHelloWord的博客
06-04 4350
直接放图，这里做的是权限控制 <table width="100%"> <tbody> <tr v-for="(permissionTop,topIndex) in tableData" :key="topIndex"> <th style="line-height:48px;border:1px solid #1E9FFF;padding:0 10px;width: 150px;"> <el-checkbox :
vue插入多个选择框
最新发布
09-02
在Vue中，你可以使用`v-for`指令来动态生成多个选择框。下面是一个简单的示例，展示了如何插入多个选择框： ```html <template> <div> <div v-for="(option, index) in options" :key="index"> <label>{{ option.label }}</label> <select v-model="option.selected"> <option v-for="(value, optionIndex) in option.values" :key="optionIndex" :value="value">{{ value }}</option> </select> </div> </div> </template> <script> export default { data() { return { options: [ { label: "Option 1", values: ["Value 1", "Value 2", "Value 3"], selected: "" }, { label: "Option 2", values: ["Value A", "Value B", "Value C"], selected: "" }, // 添加更多选项... ] }; } }; </script> ``` 在上面的代码中，我们使用了`v-for`指令来迭代`options`数组，并为每个选项生成一个选择框。每个选择框都有一个绑定的`selected`属性，用于存储选择的值。 注意：这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值