应用场景:弹窗里的 el-checkbox-group 无法选择和取消

<template>
  <div>
    <el-button type="text" @click="clickFn">点击打开 Dialog</el-button>
    <!--  -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form ref="form" :model="dataForm" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动名称2">
          <el-checkbox-group v-model="dataForm.appList" @change="changeFn">
            <el-checkbox v-for=" (app,index) in dataForm.apps" :key="index" :label="app.value">{{app.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--  -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: '活动',
        //
        appList: [1, 2, 3, 4],
        apps: [
          { label: '基础1', value: 1 },
          { label: '基础2', value: 2 },
          { label: '基础3', value: 3 },
          { label: '基础4', value: 4 },
          { label: '基础5', value: 5 },
          { label: '基础6', value: 6 },
          { label: '基础7', value: 7 },
          { label: '基础8', value: 8 }
        ]
      },
      dialogVisible: false,
      demoData: {
        role: '角色切换',
        push: '离线推送'
      },
      option: [],
      dataForm: {}
    }
  },

  methods: {
    clickFn() {
      this.dialogVisible = true// 打开弹窗
      // 直接赋值会无法选择
      // this.dataForm.apps = this.form.apps
      // this.dataForm.appList = this.form.appList
      // this.dataForm.name = this.form.name

      // 正确写法   this.$set(this.dataForm, 'apps', this.form.apps) 关键代码
      this.$set(this.dataForm, 'apps', this.form.apps)
      this.$set(this.dataForm, 'appList', this.form.appList)
      this.$set(this.dataForm, 'name', this.form.name)
      // 通过接口获取数据
      // findData().then(res => {
      //   // 直接赋值会无法选择
      //   // this.dataForm.apps = res.apps
      //   // this.dataForm.appList = res.appList
      //   // this.dataForm.name = res.name

      //   // 正确写法
      //   this.$set(this.dataForm, 'apps', res.apps)
      //   this.$set(this.dataForm, 'appList', res.appList)
      //   this.$set(this.dataForm, 'name', res.name)
      // })
    },
    changeFn(val) {
      console.log('val', val)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style>

</style>

重要代码this.$set(this.dataForm, ‘apps’, this.form.apps)

参考资料