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">
      <span class="hljs-name"el-option>
  <span class="hljs-name"el-select>
<span class="hljs-name"template>


<script>
export default {
  data(){
    {
      options: [{
        value: '1',
        label: '手機'
      }, {
        value: '2',
        label: '電腦'
      }, {
        value: '3',
        label: '電視'
      }],
      value: ''
    }
  }
}
class="hljs-name"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">
      <span class="hljs-name"el-option>
  <span class="hljs-name"el-select>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return{
      options: [{
        value: '1',
        label: '手機'
      }, {
        value: '2',
        label: '電腦'
      }, {
        value: '3',
        label: '電視',
        disabled: true
      }],
      value: ''
    }
  }
}
class="hljs-name"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">
      <span class="hljs-name"el-option>
  <span class="hljs-name"el-select>
<span class="hljs-name"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)
    }
  }
}
class="hljs-name"script>

效果圖：

Switch 開關

Switch 組件表示兩種相互對立的狀態間的切換，多用于觸發「開/關」，使用 el-switch 標簽即可，綁定 v-model 到一個 Boolean 類型的變量，分別表示開/關，可以使用 active-color 屬性與 inactive-color 屬性來設置開關的背景色，代碼如下所示：

<template>
  <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949">
  <span class="hljs-name"el-switch>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return {
      value: true
    }
  }
}
class="hljs-name"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="下架">
  <span class="hljs-name"el-switch>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return {
      value: true
    }
  }
}
class="hljs-name"script>

效果圖：

Switch 常用的事件為 change，即點擊開關的時候，會觸發該方法，代碼如下：

<template>
  <el-switch
          style="display: block"
          v-model="val"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="上架"
          inactive-text="下架"
          @change="change">
  <span class="hljs-name"el-switch>
<span class="hljs-name"template>


<script>
export default {
  data(){
    return {
      val: true
    }
  },
  methods:{
    change(){
      console.log('當前開關的狀態：'+this.val)
    }
  }
}
class="hljs-name"script>

效果圖：

以上就是 Element UI 中 Select、Switch 組件的使用，下一篇教程楠哥將繼續帶領大家學習 Element UI 其他組件的使用，如果你覺得這篇教程對你有幫助，就幫楠哥點個贊吧，我們下期教程再見。