Element-ui框架checkbox複選框回顯

          

    

先看下效果是否是你須要的。。。。。

 

 而後廢話很少說，上代碼，但願可以幫助到你。。。

 

 1 <template>
 2     <div class=''>
 3          <el-form label-width="100px" class="demo-ruleForm">
 4             <el-form-item>
 5               <el-checkbox-group v-model="favourableForm">
 6                 <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>
 7               </el-checkbox-group>
 8             </el-form-item>
 9         </el-form>    
10     </div>
11 </template>
12     
13 <script>
14 export default {
15     props: {
16         message: Object
17     },
18     data() {
19         return {
20           favourableForm:[],  //選中的數據
21           favourables:[]  //初始化賦值
22         }
23     },
24     methods: {
25        change(index,item){
26             item.containPreferential==0?this.favourables[index].containPreferential=1:this.favourables[index].containPreferential=0;
27             this.$axios.post('/clapi/materiel/mealPreferentialRela/editPreferentialManage',this.favourables)
28             .then((response) => {
29             })
30             .catch((error) => {
31               this.$message({
32                 type: "warning",
33                 message: error.response.data.result
34               });
35             });
36           },
37         preferentialManage(){
38           this.$axios.get('/clapi/materiel/mealPreferentialRela/queryPreferentialManage?mealId='+this.message.id)
39           .then((response) => {
40             if(response.data.status.code == 200){
41               this.favourables = response.data.result;
42               for(let i=0;i<this.favourables.length;i++){
43                 if(this.favourables[i].containPreferential==1){
44                   this.favourableForm.push(this.favourables[i].id);
45                 }
46               }
47             }
48           })
49           .catch((error) => {
50             this.$message({
51               type: "warning",
52               message: error.response.data.result
53             });
54           });
55         }
56       },
57       created(){
58         this.mealId = this.message.id;
59         this.preferentialManage();
60       }
61  }
62 </script>
63 <style scoped>
64 .favour_checkbox{
65   display:block;
66   height:60px;
67   margin-left:0px;
68 }
69 </style>

 

 

 

如有不明白請加羣號：複製 695182980 ，也可掃碼，但願能幫助到你們。