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 ，也可扫码，希望能帮助到大家。

               

转载于:https://www.cnblogs.com/CinderellaStory/p/10728347.html