Element UI极简教程(4):Select、Switch组件的使用

致力于最高效的Java学习

B 站搜索:楠哥教你学Java
获取更多优质视频教程
Select 下拉框
Element UI 的 Select 直接使用 el-select / el-option 标签即可,属性 v-model 表示该下拉框绑定的对象,即最终选择的值会赋给该对象,直接用于 el-select 标签,el-option 标签直接用来遍历可选数据,然后做展示,其中 label 属性为选项展示的文本信息,value 为该选项的值,代码如下所示:
<template>v-for="item in options":label="item.label":value="item.value">export default {data(){{options: [{value: '1',label: '手机'}, {value: '2',label: '电脑'}, {value: '3',label: '电视'}],value: ''}}}script>
效果图:

Select 的默认值跟 value 进行绑定,此时的 value = '',所以没有默认值,而当我们设置 value = '2' 时,效果如下所示:

如果要禁用某个下拉选项的话,只需要给数据添加 disabled = true 即可,代码如下所示:
<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":label="item.label":value="item.value":disabled="item.disabled">el-option>el-select>template><script>export default {data(){return{options: [{value: '1',label: '手机'}, {value: '2',label: '电脑'}, {value: '3',label: '电视',disabled: true}],value: ''}}}script>
效果图:

Select 常用的事件为 change,即更改下拉框选项的时候,会触发该方法,代码如下:
<template><el-select v-model="val" placeholder="请选择" @change="change"><el-optionv-for="item in options":label="item.label":value="item.value":disabled="item.disabled">el-option>el-select>template><script>export default {data(){return{options: [{value: '1',label: '手机'}, {value: '2',label: '电脑'}, {value: '3',label: '电视',disabled: true}],val: ''}},methods:{change(){console.log('当前选择的是:'+this.val)}}}script>
效果图:

Switch 开关
Switch 组件表示两种相互对立的状态间的切换,多用于触发「开/关」,使用 el-switch 标签即可,绑定 v-model 到一个 Boolean 类型的变量,分别表示开/关,可以使用 active-color 属性与 inactive-color 属性来设置开关的背景色,代码如下所示:
<template><el-switchv-model="value"active-color="#13ce66"inactive-color="#ff4949">el-switch>template><script>export default {data(){return {value: true}}}script>
效果图:


还可以使用 active-text 属性与 inactive-text 属性来设置开关的文字描述,active-text 表示开启的文字描述,inactive-text 表示关闭的文字描述,代码如下所示:
<template><el-switchstyle="display: block"v-model="value"active-color="#13ce66"inactive-color="#ff4949"active-text="上架"inactive-text="下架">el-switch>template><script>export default {data(){return {value: true}}}script>
效果图:


Switch 常用的事件为 change,即点击开关的时候,会触发该方法,代码如下:
<template><el-switchstyle="display: block"v-model="val"active-color="#13ce66"inactive-color="#ff4949"active-text="上架"inactive-text="下架"@change="change">el-switch>template><script>export default {data(){return {val: true}},methods:{change(){console.log('当前开关的状态:'+this.val)}}}script>
效果图:

以上就是 Element UI 中 Select、Switch 组件的使用,下一篇教程楠哥将继续带领大家学习 Element UI 其他组件的使用,如果你觉得这篇教程对你有帮助,就帮楠哥点个赞吧,我们下期教程再见。
推荐阅读
楠哥简介
资深 Java 工程师,微信号 southwindss
《Java零基础实战》一书作者
腾讯课程官方 Java 面试官,今日头条认证大V
GitChat认证作者,B站认证UP主(楠哥教你学Java)
致力于帮助万千 Java 学习者持续成长。
有收获,就点个在看

