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

秒速五厘米 2021-08-13 14:13 676阅读 0赞

## el-select ##

示例：  
![在这里插入图片描述][2020010810081467.png]

代码：

<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>

doc: { 
            zhic: ""
       },
       zhicdata: [
            { 
              name: "主任医师",
              id: "11"
            },
            { 
              name: "副主任医师",
              id: "12"
            },
            { 
              name: "主治医师",
              id: "13"
            },
            { 
              name: "住院医师",
              id: "14"
            }
          ],

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

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

## el-checkbox ##

示例：  
![在这里插入图片描述][20200108100957304.png]  
代码：

<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>

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,
          }

// 获取医生坐诊时间
        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
          }
        },

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

[2020010810081467.png]: /images/20210813/5c18ba08c2b44049960a72571958dfa1.png
[20200108100957304.png]: /images/20210813/52b2fb3895a845eda3f0479d9e352f7d.png