vue2 el-checkbox-group 不能勾选问题

应用场景:弹窗里的 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

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

参考资料