美文网首页
全选,多选,验证的时候判断长度==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