vue在编辑时默认选择已有权限,并实现全选和单选

jsp代码:

 <div class="row clearfix">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>权限选择:</label>
            <div class="form-controls col-xs-8 col-sm-9">
                <dl class="Hui-admin-permission-list">
                    <dt>
                        <label>
                            <input type="checkbox"  name="user-Character-0" id="user-Character-0" class="valid" v-model='isAllChecked' @click='chooseAll()'>
                            全选</label>
                    </dt>
                    <dd>
                        <dl class="clearfix Hui-admin-permission-list2">
                            <dt v-for="(item,index) in permInfo">
                                <label class="">
                                    <input type="checkbox" value="" name="user-Character-0-0-0"
                                           id="user-Character-0-0-0" :value="item.code" @change="singleChecked()" v-model="checkedCode">
                                    {{item.name}}</label>
                            </dt>
                        </dl>
                    </dd>
                </dl>
            </div>
        </div>

vue处理:

        data: {
            permInfo: [],           //权限列表
            operOperList:[],        //你默认选中的权限列表
            checkedCode: [],        // 用于保存被选中的数据
            isAllChecked: false,    // 正在进行中的数据是否被选中
        },
            // 用户单选
            singleChecked: function(){
                //判断每一个CheckBox是否选中,全选中让全选按钮选中
                if(this.permInfo.length == this.checkedCode.length){
                    this.isAllChecked = true;
                }else{  // 只要有一个checkbox不选中,让全选按钮不选中
                    this.isAllChecked = false;
                }
            },

            // 用户全选
            chooseAll: function(){
                var that = this;
                if(that.checkedCode.length !== 0){
                    that.checkedCode = [];
                }
                if(that.isAllChecked){
                    that.checkedCode = [];
                }else{
                    that.permInfo.forEach(function(PermInfoEntity){
                        that.checkedCode.push(PermInfoEntity.code)
                    },that)
                }
            },
          queryDate: function () {
                let that = this;
                $.ajax({
                    type: 'post',
                    url: "${ctx}/operator/operationOne",
                    dataType: "JSON",
                    data: {"operId": that.operId},
                    success: (res) => {
                        if (res.state) {
                            this.operOperList=result.operOperList;  //你已有的权限列表
                            that.operOperList.forEach(function(PermInfoEntity){
                                that.checkedCode.push(PermInfoEntity.code)
                            },that)
                        }
                    }
                });
            },

效果图:
第一次进入编辑时默认选中已有权限:
在这里插入图片描述
单击全选后:
在这里插入图片描述
单击单独一个权限:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值