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

马克社区

发布于 2022-05-19 21:00:15

1K0

发布于 2022-05-19 21:00:15

文章被收录于专栏：高端IT高端IT

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>

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119250980

本文系转载，前往查看

如有侵权，请联系?cloudcommunity@tencent.com 删除。

vue.js