关于Vue Element组件el-checkbox与el-select默认选中值的几点注意事项_el-checkbox-group默认选中

el-select

示例：

代码：

          <el-select v-model="doc.zhic" placeholder="请选择">
            <el-option
              v-for="(item,index) in zhicdata"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
1
2
3
4
5
6
7
8

   doc: {
        zhic: ""
   },
   zhicdata: [
        {
          name: "主任医师",
          id: "11"
        },
        {
          name: "副主任医师",
          id: "12"
        },
        {
          name: "主治医师",
          id: "13"
        },
        {
          name: "住院医师",
          id: "14"
        }
      ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  // 获取职称
    stepDoc(index){
      this.idx=index;
      const item = this.hislist[index];
      this.doc={
        zhic:item.zhic.toString() //获取到的是数字，一定要转换为字符串
      },
    },
1
2
3
4
5
6
7
8

v-model中的值就是默认选中的值，一定要注意这里的:value的类型一定要跟v-model类型一样。值为空时，默认值为空值。

el-checkbox

示例：

代码：

          <el-checkbox-group v-model="doc.doctime">
            <el-checkbox
              v-for="item in doctimeData"
              :label="item.id"
              true-label
              :key="item.id"
              @change="changeDoctime(item.value)"
            >{{item.title}}</el-checkbox>
          </el-checkbox-group>
1
2
3
4
5
6
7
8
9

     doc: {
        doctime: []
      },
    doctimeData: [
        {
          value: "a1",
          title: "周一上午",
          id: 0
        },
        {
          value: "a2",
          title: "周一下午",
          id: 1
        },
        {
          value: "a3",
          title: "周一晚上",
          id: 2
        },
        {
          value: "b1",
          title: "周二上午",
          id: 3
        },
        {
          value: "b2",
          title: "周二中午",
          id: 4
        },
        {
          value: "b3",
          title: "周二下午",
          id: 5
        },
        {
          value: "c1",
          title: "周三上午",
          id: 6
        },
        {
          value: "c2",
          title: "周三下午",
          id: 7
        },
        {
          value: "c3",
          title: "周三晚上",
          id: 8
        },
        {
          value: "d1",
          title: "周四上午",
          id: 9
        },
        {
          value: "d2",
          title: "周四下午",
          id: 10
        },
        {
          value: "d3",
          title: "周四晚上",
          id: 11
        },
        {
          value: "e1",
          title: "周五上午",
          id: 12
        },
        {
          value: "e2",
          title: "周五下午",
          id: 13
        },
        {
          value: "e3",
          title: "周五晚上",
          id: 14
        },
        {
          value: "f1",
          title: "周六上午",
          id: 15
        },
        {
          value: "f2",
          title: "周六下午",
          id: 16
        },
        {
          value: "f3",
          title: "周六晚上",
          id: 17
        },
        {
          value: "g1",
          title: "周日上午",
          id: 18
        },
        {
          value: "g2",
          title: "周日下午",
          id: 19
        },
        {
          value: "g3",
          title: "周日晚上",
          id: 20
        }
      ],
      indexzc:{
        'a1':0,
        'a2':1,
        'a3':2,
        'b1':3,
        'b2':4,
        'b3':5,
        'c1':6,
        'c2':7,
        'c3':8,
        'd1':9,
        'd2':10,
        'd3':11,
        'e1':12,
        'e2':13,
        'e3':14,
        'f1':15,
        'f2':16,
        'f3':17,
        'g1':18,
        'g2':19,
        'g3':20,
      }
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

    // 获取医生坐诊时间
    stepDoc(index){
      this.idx=index;
      let arr = [];
      const item = this.hislist[index];
      this.dochisarr=item.zzsj.split(',')
      item.zzsj.split(',').forEach((val)=>{
        arr.push(this.indexzc[val])
        })
       this.doc={
        doctime: arr
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

v-model中的值的类型为数组，可以是['item1', 'item2'],数组的值就是默认选中的值。也可以是[1,2,3],数组中的值就是数据数组（如我上面的doctimeData）默认选中的索引。我这里是因为获取到是doctimeData的value属性，所以我创建了一个indexzc对象。每次循环push到空数组arr中。