elementui下拉

ElementUI 下拉组件使用指南

ElementUI 提供了多种下拉组件，包括 Select 选择器、Dropdown 下拉菜单等。以下是常见用法和示例。

Select 选择器

Select 组件用于表单中的下拉选择，支持单选、多选、搜索过滤等功能。

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

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: '选项1' },
        {value: 'option2', label: '选项2' },
        {value: 'option3', label: '选项3' }
      ]
    }
  }
}
</script>

Dropdown 下拉菜单

Dropdown 组件用于触发下拉菜单，常用于操作菜单或导航栏。

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>选项1</el-dropdown-item>
      <el-dropdown-item>选项2</el-dropdown-item>
      <el-dropdown-item>选项3</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

远程搜索

Select 支持远程搜索，结合 filterable 和 remote 属性实现动态加载选项。

<template>
  <el-select
    v-model="selectedValue"
    filterable
    remote
    placeholder="请输入关键词"
    :remote-method="loadOptions"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [],
      loading: false
    }
  },
  methods: {
    loadOptions(query) {
      if (query) {
        this.loading = true;
        // 模拟异步请求
        setTimeout(() => {
          this.options = [
            { value: query + '1', label: query + '选项1' },
            { value: query + '2', label: query + '选项2' }
          ];
          this.loading = false;
        }, 500);
      } else {
        this.options = [];
      }
    }
  }
}
</script>

多选与自定义模板

Select 支持多选，并可通过 slot 自定义选项模板。

<template>
  <el-select v-model="selectedValues" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  }
}
</script>

分组选择

Select 支持分组显示选项，使用 el-option-group 包裹多个 el-option。

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <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>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        {
          label: '热门城市',
          options: [
            { value: 'shanghai', label: '上海' },
            { value: 'beijing', label: '北京' }
          ]
        },
        {
          label: '其他城市',
          options: [
            { value: 'shenzhen', label: '深圳' },
            { value: 'guangzhou', label: '广州' }
          ]
        }
      ]
    }
  }
}
</script>

以上是 ElementUI 下拉组件的常见用法，更多高级功能可参考 ElementUI 官方文档。