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

  Java大联盟

  致力于最高效的Java学习

关注

B 站搜索：楠哥教你学Java

获取更多优质视频教程

Select 下拉框

Element UI 的 Select 直接使用 el-select / el-option 标签即可，属性 v-model 表示该下拉框绑定的对象，即最终选择的值会赋给该对象，直接用于 el-select 标签，el-option 标签直接用来遍历可选数据，然后做展示，其中 label 属性为选项展示的文本信息，value 为该选项的值，代码如下所示：

<template>
  <el-select v-model="value" placeholder="请选择">
      <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value">
      </el-option>
  </el-select>
</template>


<script>
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-option
              v-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-option
              v-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-switch
          v-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-switch
          style="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-switch
          style="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 其他组件的使用，如果你觉得这篇教程对你有帮助，就帮楠哥点个赞吧，我们下期教程再见。

推荐阅读
1、Spring Boot+Vue项目实战
2、B站：4小时上手MyBatis Plus
3、一文搞懂前后端分离
4、快速上手Spring Boot+Vue前后端分离
楠哥简介
资深 Java 工程师，微信号 southwindss
《Java零基础实战》一书作者
腾讯课程官方 Java 面试官，今日头条认证大V
GitChat认证作者，B站认证UP主（楠哥教你学Java）
致力于帮助万千 Java 学习者持续成长。


有收获，就点个在看