Element-ui框架checkbox复选框回显

         

先看下效果是不是你需要的。。。。。

然后废话不多说，上代码，希望能够帮助到你。。。

 <template>
     <div class=''>
          <el-form label-width="100px" class="demo-ruleForm">
             <el-form-item>
               <el-checkbox-group v-model="favourableForm">
                 <el-checkbox v-for="(item,index) in favourables" @change="change(index,item)" :label="item.id" :value="item.id" :key="item.id" name="type" class="favour_checkbox">{{item.preferentialName}}</el-checkbox>
               </el-checkbox-group>
             </el-form-item>
         </el-form>
     </div>
 </template>

 <script>
 export default {
     props: {
         message: Object
     },
     data() {
         return {
           favourableForm:[],  //选中的数据
           favourables:[]  //初始化赋值
         }
     },
     methods: {
        change(index,item){
             item.containPreferential==0?this.favourables[index].containPreferential=1:this.favourables[index].containPreferential=0;
             this.$axios.post('/clapi/materiel/mealPreferentialRela/editPreferentialManage',this.favourables)
             .then((response) => {
             })
             .catch((error) => {
               this.$message({
                 type: "warning",
                 message: error.response.data.result
               });
             });
           },
         preferentialManage(){
           this.$axios.get('/clapi/materiel/mealPreferentialRela/queryPreferentialManage?mealId='+this.message.id)
           .then((response) => {
             if(response.data.status.code == 200){
               this.favourables = response.data.result;
               for(let i=0;i<this.favourables.length;i++){
                 if(this.favourables[i].containPreferential==1){
                   this.favourableForm.push(this.favourables[i].id);
                 }
               }
             }
           })
           .catch((error) => {
             this.$message({
               type: "warning",
               message: error.response.data.result
             });
           });
         }
       },
       created(){
         this.mealId = this.message.id;
         this.preferentialManage();
       }
  }
 </script>
 <style scoped>
 .favour_checkbox{
   display:block;
   height:60px;
   margin-left:0px;
 }
 </style>

若有不明白请加群号：复制 695182980 ，也可扫码，希望能帮助到大家。