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

科技前沿 • 2025-03-16 12:34 • 阅读 57

大家好，我是讯享网，很高兴认识大家。

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

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

el-select

el-checkbox

相关推荐