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)
                        }
                    }
                });
            },

效果图：
第一次进入编辑时默认选中已有权限：

单击全选后：

单击单独一个权限：