分享一个 Vue Element-ui 的两级checkbox动态渲染解决方案

爱被打了一巴掌 2022-05-17 09:28 371阅读 0赞

**以下是实现方案**

使用数据控制checkbox的勾选状态，感觉这种方式不同于jquery的直接操作DOM，刚刚开始使用真的搞不懂，思路一时转不过来，遇到同样问题的同学可以参考我这个做法，有疑问的同学可以留言。

<template>
    <div class="content">
    <div class="power">
    <h4>权限设置</h4>
    <div v-for="(permissionTop, topIndex) in tableData" :key="topIndex" >
    <p class="checkGroup" style="width:99%;">
    <el-checkbox :indeterminate="permissionTop.indeterminate" :key="topIndex" v-model="permissionTop.mychecked" :label="permissionTop.permissionId" @change="onChangeTop(topIndex, permissionTop.permissionId, $event)">{
       {permissionTop.permissionName}}</el-checkbox>
    </p>
    <div style="margin: 15px 0;"></div>
    <el-checkbox v-for="permissionSon in permissionTop.childrenList" v-model="permissionSon.mychecked" @change="onChangeSon(topIndex, permissionSon.permissionId, permissionTop.permissionId, $event)" :label="permissionSon.permissionId" :key="permissionSon.permissionId">{
       {permissionSon.permissionName}}</el-checkbox>
    </div>
    <el-button class="keep" @click="submitOperatorInfo" >保存</el-button>
    </div>
    </div>
    </template>

事件方法：

data(){
            return{
                tableData: [
                {
                    "childrenList": [
                        {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15,"permissionId": 21,"permissionKey": "orderForm","permissionName": "订单","permissionPath": "","showFlag": "1"},
                        {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15,"permissionId": 22, "permissionKey": "user","permissionName": "用户","permissionPath": "","showFlag": "1"},
                        {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15, "permissionId": 23,"permissionKey": "exportOrderForm","permissionName": "导出订单","permissionPath": "","showFlag": "1"},
                        {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15, "permissionId": 24, "permissionKey": "exportUser", "permissionName": "导出用户","permissionPath": "","showFlag": "1"}
                    ],
                    "permissionName": "用户服务","mychecked": true,"indeterminate": false,"createTime": 1533707273000,"parentPermId": 0,"permissionId": 15,"permissionKey": "userService","permissionPath": "","showFlag": "1"
                },
                {
                    "childrenList": [
                        {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 16,"permissionId": 25,"permissionKey": "contentView","permissionName": "内容查看","permissionPath": "","showFlag": "1"},
                        {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 16,"permissionId": 26,"permissionKey": "contentAccept","permissionName": "内容采纳","permissionPath": "","showFlag": "1"},
                        {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 16,"permissionId": 27,"permissionKey": "distributionCenter","permissionName": "分销中心","permissionPath": "","showFlag": "1"},
                        {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 16,"permissionId": 28,"permissionKey": "myMall","permissionName": "我的商城","permissionPath": "","showFlag": "1"}
                    ],
                    "permissionName": "内容商城","mychecked": true,"indeterminate": false,"createTime": 1533707273000,"parentPermId": 0,"permissionId": 16,"permissionKey": "contentMall","permissionPath": "","showFlag": "1"
                }],
                activeName: 'accountManage',
                people:'',
                phoneNum:'',
                isIndeterminate:true,
            }
        },
    mounted(){
            this.refurbishPermissionInfo();//刷新权限信息
        },
    mounted(){
            this.refurbishPermissionInfo();//刷新权限信息
        },
        methods: {
            onChangeTop(index, topId, e){//父级change事件
                this.tableData[index].mychecked = e//父级勾选后，子级全部勾选或者取消
                if(e == false) this.tableData[index].indeterminate = false //去掉不确定状态
                var childrenArray = this.tableData[index].childrenList
                if(childrenArray)
                    for(var i=0,len=childrenArray.length; i<len; i++)
                        childrenArray[i].mychecked = e
            },
            onChangeSon(topIndex, sonId, topId, e){//子级change事件
                var childrenArray = this.tableData[topIndex].childrenList
                var tickCount = 0, unTickCount = 0, len = childrenArray.length
                for(var i = 0; i < len; i++){
                    if(sonId == childrenArray[i].permissionId) childrenArray[i].mychecked = e 
                    if(childrenArray[i].mychecked == true) tickCount++
                    if(childrenArray[i].mychecked == false) unTickCount++
                }
                if(tickCount == len) {//子级全勾选
                    this.tableData[topIndex].mychecked = true 
                    this.tableData[topIndex].indeterminate = false
                } else if(unTickCount == len) {//子级全不勾选
                    this.tableData[topIndex].mychecked = false 
                    this.tableData[topIndex].indeterminate = false
                } else {
                    this.tableData[topIndex].mychecked = true 
                    this.tableData[topIndex].indeterminate = true //添加不确定状态
                }
            },
            refurbishPermissionInfo(){//刷新checkbox
                var userId = 63
                Api.admin.post('/user/findManagerPermissionList?userId='+userId).then(resp => {
                    console.log(resp.data)
                    if(resp.data.code == 1 && resp.data.data && resp.data.data.length > 0){
                        const checkboxShow = document.getElementById("checkboxShow")
                        const permissionArray = resp.data.data
                        const permissionArrayObj = new Array()
                        for(var i = 0,len = permissionArray.length; i < len; i++){//根权限
                            permissionArrayObj[i] = new Object()
                            permissionArrayObj[i].permissionName = permissionArray[i].permissionName
                            permissionArrayObj[i].permissionId = permissionArray[i].permissionId
                            permissionArrayObj[i].parentPermissionId = permissionArray[i].parentPermId
                            permissionArrayObj[i].mychecked = false
                            permissionArrayObj[i].indeterminate = false
                            if(permissionArray[i].childrenList && permissionArray[i].childrenList.length > 0){//子权限
                                const originalChildrenList = permissionArray[i].childrenList
                                const childrenArray = new Array()
                                for(var j = 0,leng = originalChildrenList.length; j < leng; j++){
                                    const childrenObj = new Object()
                                    childrenObj.permissionName = originalChildrenList[j].permissionName
                                    childrenObj.permissionId = originalChildrenList[j].permissionId
                                    childrenObj.parentPermissionId = originalChildrenList[j].parentPermId
                                    childrenObj.mychecked = false
                                    permissionArrayObj[i].indeterminate = false
                                    childrenArray[j] = childrenObj
                                }
                                permissionArrayObj[i].childrenList = childrenArray
                            }
                        }
                        this.tableData = permissionArrayObj
                    }
                })
            },
            submitOperatorInfo(){
                var permissionArray = new Array()
                if(this.tableData) {
                    for(var i = 0,len = this.tableData.length; i < len; i++){
                        if(this.tableData[i].mychecked == true) permissionArray.push(this.tableData[i].permissionId)
                        if(this.tableData[i].childrenList && this.tableData[i].childrenList.length > 0){
                            var sonPermissionArray = this.tableData[i].childrenList
                            for(var j = 0, leng = sonPermissionArray.length; j < leng; j++)
                                permissionArray.push(sonPermissionArray[j].permissionId)
                        }
                    }
                }
                let params = new URLSearchParams();
                params.append('orgUserId', "");//企业ID
                params.append('permissionList[]', permissionArray);//权限ID
                Api.admin.post('/login/addOperators', params).then(resp => {
                    if (resp.data.code == 1) {//成功
                        window.location.href = "/ShopManage";//刷新账户管理
                    } else return this.$message(resp.data.msg);
                });
            }
        }

mycheck是控制checkbox的勾选状态，indeterminate则是控制checkbox不确定状态。

运行效果：

![70][]

![70 1][]

感兴趣的朋友可以关注微信公众号（会定时推送新的知识）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70][]

[70]: /images/20220517/63b7a33c372341939963c88e092ac5cd.png
[70 1]: /images/20220517/ab82badb2eb14116ac49462aef8d8226.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70]: /images/20220517/7bcceff295e940fda3c8f7ad680ad1e4.png