使用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>

这样，我们就可以分组显示选项啦！