一文搞懂:关于VueElement组件el

简介: 一文搞懂:关于VueElement组件el

"

el-select

示例:

代码:

[span class=""hljs-name"">el-select v-model=""doc.zhic"" placeholder=""请选择""

[span class=""hljs-name"">el-option

v-for=""(item,index) in zhicdata""

:key=""index""

:label=""item.name""

:value=""item.id""

>

doc: {

zhic: """"

},

zhicdata: 【

{

name: ""主任医师"",

id: ""11""

},


//代码效果参考: https://v.youku.com/v_show/id_XNjQwNjg1MjIzNg==.html

{

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

示例:

代码:

[span class=""hljs-name"">el-checkbox-group v-model=""doc.doctime""

[span class=""hljs-name"">el-checkbox

v-for=""item in doctimeData""

:label=""item.id""

true-label

:key=""item.id""

@change=""changeDoctime(item.value)""

//代码效果参考:https://v.youku.com/v_show/id_XNjQwMDM5NzI4MA==.html

>{ {item.title}}

更多内容请见原文,原文转载自:


"
image.png
相关文章
|
2月前
|
JavaScript
一文搞懂Vue3中如何使用ref获取元素节点?
一文搞懂Vue3中如何使用ref获取元素节点?
329 1
|
7月前
【Vue2.0学习】—el与data的两种写法(三十六)
【Vue2.0学习】—el与data的两种写法(三十六)
|
7月前
【Vue2.0学习】—class与style绑定(三十八)
【Vue2.0学习】—class与style绑定(三十八)
|
8月前
|
JavaScript 前端开发
【Vue】el 和 data短小精湛的细节!
【Vue】el 和 data短小精湛的细节!
|
前端开发
前端学习笔记202304学习笔记第十天-vue3.0-封装头部button组件
前端学习笔记202304学习笔记第十天-vue3.0-封装头部button组件
59 0
|
JavaScript API
elementui源码学习之仿写一个el-message
elementui源码学习之仿写一个el-message
119 1
|
JavaScript 前端开发
如何使用 layui 的日期选择器组件?底层原理是什么?
如何使用 layui 的日期选择器组件?底层原理是什么?
320 0
elementui源码学习之仿写一个el-bread
elementui源码学习之仿写一个el-bread
88 0
|
JavaScript
elementui源码学习之仿写一个el-divider
elementui源码学习之仿写一个el-divider
186 0
|
JavaScript 开发者
Vue的组件一共有哪些?底层原理是什么?
Vue的组件一共有哪些?底层原理是什么?
101 0

热门文章

最新文章