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 ，也可掃碼，希望能幫助到大家。