美文网首页
全选,多选,验证的时候判断长度==0的时候提示,否则不提示,但是

全选,多选,验证的时候判断长度==0的时候提示,否则不提示,但是

作者: 流泪手心_521 | 来源:发表于2020-10-22 14:03 被阅读0次

    j结构

    <el-form-item label="版块权限" class="plateBox"  prop="checkedCities">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <el-checkbox-group class="plate" v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(city,index) in cities" :label="city" :key="city.sectionCode+index">{{city.sectionName}}</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
    

    js

     //全选
            handleCheckAllChange(val) {
                this.checkedCities = val ? this.cities : [];
                this.isIndeterminate = false;
                this.dialogForm.sectionCodeAndName=this.checkedCities;//全选数据
            },
            //多选
            handleCheckedCitiesChange(value) {
              console.log(value);
              //组装多选的数据
              if(value.length>0){
                this.dialogForm.sectionCodeAndName=[];
                for( let i=0; i<value.length; i++){
                  this.dialogForm.sectionCodeAndName.push({
                    sectionCode:value[i].sectionCode,
                    sectionName:value[i].sectionName
                  });
                }
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
              }else{
                this.isIndeterminate=false
                this.checkAll=false
              }
            },
    

    3.每次点击添加的时候清空弹窗的上一次数据

    // 关闭新增/修改版块对话框
          closeDialog() {
            this.isIndeterminate=false;//清空全选的数据(注意,这个花费了我2小时,方向找错了,一直在全选的方法里面找问题,结构是没有清空弹窗的问题)
            this.checkAll=false;//清空全选的数据
            this.$refs.dialogForm.resetFields();
            this.dialogVisible = false;
            this.checkedCities=[];//取消时清空选中的数据
            this.dialogForm = {
              userInfo:'',//工号/姓名
              approveStaffCode:'',
              approveStaffName:'',//姓名
              approveOrgName:'',//部门
              approveOrgCode:'',
              sectionCodeAndName:[],//版块
            };
            this.$nextTick(() => {
              this.$refs.dialogForm.clearValidate();
            });
          }
    

    相关文章

      网友评论

          本文标题:全选,多选,验证的时候判断长度==0的时候提示,否则不提示,但是

          本文链接:https://www.haomeiwen.com/subject/ptgumktx.html