全选的数据和多选的数据(name和code后台都要,但是elem

2020-09-14  本文已影响0人  流泪手心_521

1.后台要的数据格式

{"userInfo":"1111114111","approveStaffName":"李四","orgName":"研发支持","data":[{"sectionCode":"120324","sectionName":"财务部"},{"sectionCode":"string","sectionName":"集团板块"}]}

结构,key值一定不能重复

<el-form-item label="板块权限" class="plateBox">
    <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>

//确认按钮
 <div class="dialog_button">
        <el-button type="primary" @click="submitForm('dialogForm')">确定</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
 </div>

js
1.data定义的数据

data() {
      return {
        //全选、多选
        checkAll: false,
        checkedCities: [],//全选的数据
        cities: [],//所有的数据
        cityOptions:[],//单选的全部数据
        isIndeterminate: false,
        //添加
       dialogForm: {
              userInfo:'',//工号/姓名
              approveStaffName:'',//姓名
              orgName:'',//部门
              data:[]
        },
    }  
}

2.新增的时候获取多选的数据(调用后台接口,获取到想要的数据)

      //新增
      addRelease() {
        this.dialogForm.userInfo='';
        this.dialogForm.approveStaffName='';
        this.dialogForm.orgName='';
        this.dialogTitle = '添加用户';
        this.dialogVisible = true;
        //多选
        contentAuditAuthMngApi.findListPlate().then(res=>{
          if(res.status===0){
              console.log(res);
              this.cities=[];
              for(let i=0; i<res.data.length;i++){//注意!!!在这里一定把code和name都放cities里面
                  this.cities.push({
                  sectionName:res.data[i].sectionName,
                  sectionCode:res.data[i].sectionCode
              });
            }
          }
          console.log(this.cities);
        }) .catch((error) => {
          console.log('/sectionMsg/findAllSectionData多选, error)
        });
      },

3.全选和多选

//全选
 handleCheckAllChange(val) {
            this.checkedCities = val ? this.cities : [];
            this.isIndeterminate = false;
            this.dialogForm.data=this.checkedCities;//全选数据
},
 //多选
handleCheckedCitiesChange(value) {
            //组装多选的数据,然后把组装好的数据给添加的参数
            this.dialogForm.data=[];
            for( let i=0; i<value.length; i++){
                this.dialogForm.data.push({
                    sectionCode:value[i].sectionCode,
                    sectionName:value[i].sectionName
          });
 }

4.点击确认的时候给后台传值,添加完成

      //添加的确认按钮
      submitForm(formName){
        console.log(this.dialogForm);
          this.$refs[formName].validate((valid) => {
              if (valid) {
                  contentAuditAuthMngApi.findListApproveUserAuthAdd(this.dialogForm).then(res=>{
                      console.log(res);
                  }) .catch((error) => {
                      console.log('/sectionMsg/findAllSectionData多选', error)
                  });
              }
          });
      },
上一篇 下一篇

猜你喜欢

热点阅读