關(guān)于Vue Element組件el-checkbox與el-select默認(rèn)選中值的幾點(diǎn)注意事項(xiàng)

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: "主任醫(yī)師",
          id: "11"
        },
        {
          name: "副主任醫(yī)師",
          id: "12"
        },
        {
          name: "主治醫(yī)師",
          id: "13"
        },
        {
          name: "住院醫(yī)師",
          id: "14"
        }
      ],


  // 獲取職稱
    stepDoc(index){
      this.idx=index;
      const item = this.hislist[index];
      this.doc={
        zhic:item.zhic.toString() //獲取到的是數(shù)字，一定要轉(zhuǎn)換為字符串
      },
    },



v-model中的值就是默認(rèn)選中的值，一定要注意這里的:value的類型一定要跟v-model類型一樣。值為空時(shí)，默認(rèn)值為空值。
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,
      }


    // 獲取醫(yī)生坐診時(shí)間
    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中的值的類型為數(shù)組，可以是['item1', 'item2'],數(shù)組的值就是默認(rèn)選中的值。也可以是[1,2,3],數(shù)組中的值就是數(shù)據(jù)數(shù)組（如我上面的doctimeData）默認(rèn)選中的索引。我這里是因?yàn)楂@取到是doctimeData的value屬性，所以我創(chuàng)建了一個(gè)indexzc對象。每次循環(huán)push到空數(shù)組arr中。

作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路