关于Vue Element组件el-checkbox与el-select默认选中值的几点注意事项
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>
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
示例:
代码:
<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中。
作者:Vam的金豆之路
主要领域:前端开发
我的微信:maomin9761
微信公众号:前端历劫之路