使用Vue.js和Element UI創建下拉選項卡 – El-option指南

一、什麼是El-option指南

El-option 是 Element UI 中的下拉選擇器。該組件基於 Vue.js 和 Element UI，支持多選、遠程搜索、分組和自定義模板等功能。其使用方便，且具有強大的可擴展性。本指南將詳細介紹如何使用 Vue.js 和 Element UI 來創建下拉選項卡 – El-option指南。

二、安裝Element UI

在使用 Element UI 的組件前，我們需要先安裝並引入 Element UI 庫。在項目中運行以下命令安裝 Element UI。

npm install element-ui --save

在 main.js 引入 Element UI。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

三、創建下拉選擇器

首先，我們需要在 Vue 模板中添加 El-option 組件。

<el-select v-model="value" multiple>
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

在 data 中定義 options 選項數組。

export default {
  data() {
    return {
      value: '',
      options: [
        {
          value: 'option1',
          label: '選項1'
        },
        {
          value: 'option2',
          label: '選項2'
        },
        {
          value: 'option3',
          label: '選項3'
        },
        {
          value: 'option4',
          label: '選項4'
        }
      ]
    }
  }
}

這樣就可以創建一個簡單的下拉選擇器了。我們可以通過設置 multiple 屬性將其設置為多選。注意，value 綁定的是選中的值，而不是選中的索引。

四、自定義模板

使用自定義模板功能，我們可以自定義每個選項的顯示方式。

首先，我們需要在 El-option 中添加一個 slot。

<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
    <span class="custom-template">{{ item.label }}</span>
        <i class="custom-icon el-icon-info"></i>
</el-option>

在 css 中定義自定義模板的樣式。

.custom-template {
  display: inline-block;
  padding-right: 5px;
}

這樣，我們就可以自定義每個選項的顯示模板了。

五、遠程搜索

El-option 也支持遠程搜索功能。我們可以通過設置 filterable 屬性，來實現遠程搜索功能。

首先，我們需要在 data 中定義搜索框輸入的值 searchValue 和搜索結果 searchResults。

export default {
  data() {
    return {
      searchValue: '',
      searchResults: []
    }
  }
}

我們可以在 remote-method 事件中執行遠程搜索。

<el-select v-model="value" remote :remote-method="search">
  <el-option
    v-for="item in searchResults"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

在 methods 中定義 search 函數。

search(query) {
  this.searchValue = query
  this.searchResults = []
  if (query !== '') {
    this.loading = true
    setTimeout(() => {
      this.searchResults = this.options.filter(option => {
        return option.label.toLowerCase().indexOf(query.toLowerCase()) > -1
      })
      this.loading = false
    }, 2000)
  }
}

這樣，我們就可以通過輸入框進行遠程搜索啦！

六、分組

El-option 也支持分組功能。我們可以通過設置 optgroup 屬性，來實現分組。

首先，我們需要在 options 中添加一個子數組 groups，並為每個分組設置一個 label。

export default {
  data() {
    return {
      value: '',
      options: [
        {
          label: '分組1',
          options: [
            {
              value: 'option1',
              label: '選項1'
            },
            {
              value: 'option2',
              label: '選項2'
            }
          ]
        },
        {
          label: '分組2',
          options: [
            {
              value: 'option3',
              label: '選項3'
            },
            {
              value: 'option4',
              label: '選項4'
            }
          ]
        }
      ]
    }
  }
}

然後，在模板中添加 optgroup 屬性。

<el-select v-model="value">
  <el-option-group
    v-for="group in options"
    :key="group.label"
    :label="group.label">
    <el-option
      v-for="item in group.options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-option-group>
</el-select>

這樣，我們就可以分組顯示選項啦！