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

el-select

示例：

代码：

          <el-select v-model="doc.zhic" placeholder="请选择"><el-optionv-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-checkboxv-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中。

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

element select 默认选中值
经常弄错element里select v-model值的类型,记录一下以免再犯 <el-select v-model="searchForm.isEssence" class ...
从零实现Vue的组件库（十）- Select 实现
当选项过多时,使用下拉菜单展示并选择内容. Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显: 单选.多选的区分,以及对应处理. 1. 实例代码 <fat-sel ...
vue 复选框默认选中_vue 实现单选框设置默认选中值
vue 实现单选框设置默认选中值 vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据生成后的代码就是 js ...
vue.js 默认选中select_vue.js 解决v-model让select默认选中不生效的问题
笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这 ...
antd checkbox 默认选中_antd + select 默认选中问题？
题目描述 react + antd select 默认选中问题题目来源及自己的思路我是通过 const { getFieldDecorator } = this.props.form;来设置他们的 ...
jquery 获取checkbox 或 select 的选中值（一组和单个）
使用 jquery 获取一组或者单个 checkbox 的选中状态的值.下面通过一个示例进行说明,假设现有一页面有一组 checkbox 的 name 的值为 id ,那么获取这组 name=id 的 ...
js、jquery操作复选框checkbox总结（单个/多个获取选中值、初始化设置默认选中值、全选反选）
一.单个复选框使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
vue中单选框设置默认选中值
vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 <li v-for="(value,i) ...
Vue+Element组件el-table添加表头全选文字
html部分: <el-table v-if="showTable"class="inter_table":data="apiList.slic ...
vue+element el-cascader级联选择器，点击lebel选中
官方文档只能在点击选择框的时候才能选中,在某些实际操作中需要点击lebel就选中,加上下面的代码就可以了 mounted() {setInterval(function () {document.qu ...

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

el-select

el-checkbox

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

最新文章

热门文章