ElementPlus Select 選擇器

Select 選擇器

當(dāng)選項(xiàng)過(guò)多時(shí)，使用下拉菜單展示并選擇內(nèi)容。

基礎(chǔ)用法

適用廣泛的基礎(chǔ)單選

v-model的值為當(dāng)前被選中的el-option的 value 屬性值

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <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 {
        options: [
          {
            value: '選項(xiàng)1',
            label: '黃金糕',
          },
          {
            value: '選項(xiàng)2',
            label: '雙皮奶',
          },
          {
            value: '選項(xiàng)3',
            label: '蚵仔煎',
          },
          {
            value: '選項(xiàng)4',
            label: '龍須面',
          },
          {
            value: '選項(xiàng)5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

有禁用選項(xiàng)

在el-option中，設(shè)定disabled值為 true，即可禁用該選項(xiàng)

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: '選項(xiàng)1',
            label: '黃金糕',
          },
          {
            value: '選項(xiàng)2',
            label: '雙皮奶',
            disabled: true,
          },
          {
            value: '選項(xiàng)3',
            label: '蚵仔煎',
          },
          {
            value: '選項(xiàng)4',
            label: '龍須面',
          },
          {
            value: '選項(xiàng)5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

禁用狀態(tài)

選擇器不可用狀態(tài)

為el-select設(shè)置disabled屬性，則整個(gè)選擇器不可用

<template>
  <el-select v-model="value" disabled placeholder="請(qǐng)選擇">
    <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 {
        options: [
          {
            value: '選項(xiàng)1',
            label: '黃金糕',
          },
          {
            value: '選項(xiàng)2',
            label: '雙皮奶',
          },
          {
            value: '選項(xiàng)3',
            label: '蚵仔煎',
          },
          {
            value: '選項(xiàng)4',
            label: '龍須面',
          },
          {
            value: '選項(xiàng)5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

可清空單選

包含清空按鈕，可將選擇器清空為初始狀態(tài)

為el-select設(shè)置clearable屬性，則可將選擇器清空。需要注意的是，clearable屬性?xún)H適用于單選。

<template>
  <el-select v-model="value" clearable placeholder="請(qǐng)選擇">
    <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 {
        options: [
          {
            value: '選項(xiàng)1',
            label: '黃金糕',
          },
          {
            value: '選項(xiàng)2',
            label: '雙皮奶',
          },
          {
            value: '選項(xiàng)3',
            label: '蚵仔煎',
          },
          {
            value: '選項(xiàng)4',
            label: '龍須面',
          },
          {
            value: '選項(xiàng)5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

基礎(chǔ)多選

適用性較廣的基礎(chǔ)多選，用 Tag 展示已選項(xiàng)

為el-select設(shè)置multiple屬性即可啟用多選，此時(shí)v-model的值為當(dāng)前選中值所組成的數(shù)組。默認(rèn)情況下選中值會(huì)以 Tag 的形式展現(xiàn)，你也可以設(shè)置collapse-tags屬性將它們合并為一段文字。

<template>
  <el-select v-model="value1" multiple placeholder="請(qǐng)選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>

  <el-select
    v-model="value2"
    multiple
    collapse-tags
    style="margin-left: 20px;"
    placeholder="請(qǐng)選擇"
  >
    <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 {
        options: [
          {
            value: '選項(xiàng)1',
            label: '黃金糕',
          },
          {
            value: '選項(xiàng)2',
            label: '雙皮奶',
          },
          {
            value: '選項(xiàng)3',
            label: '蚵仔煎',
          },
          {
            value: '選項(xiàng)4',
            label: '龍須面',
          },
          {
            value: '選項(xiàng)5',
            label: '北京烤鴨',
          },
        ],
        value1: [],
        value2: [],
      }
    },
  }
</script>

自定義模板

可以自定義備選項(xiàng)

將自定義的 HTML 模板插入el-option的 slot 中即可。

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span style="float: left">{{ item.label }}</span>
      <span
        style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
        >{{ item.value }}</span
      >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        cities: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          },
          {
            value: 'Nanjing',
            label: '南京',
          },
          {
            value: 'Chengdu',
            label: '成都',
          },
          {
            value: 'Shenzhen',
            label: '深圳',
          },
          {
            value: 'Guangzhou',
            label: '廣州',
          },
        ],
        value: '',
      }
    },
  }
</script>

分組

備選項(xiàng)進(jìn)行分組展示

使用?el-option-group?對(duì)備選項(xiàng)進(jìn)行分組，它的?label?屬性為分組名

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <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 {
        options: [
          {
            label: '熱門(mén)城市',
            options: [
              {
                value: 'Shanghai',
                label: '上海',
              },
              {
                value: 'Beijing',
                label: '北京',
              },
            ],
          },
          {
            label: '城市名',
            options: [
              {
                value: 'Chengdu',
                label: '成都',
              },
              {
                value: 'Shenzhen',
                label: '深圳',
              },
              {
                value: 'Guangzhou',
                label: '廣州',
              },
              {
                value: 'Dalian',
                label: '大連',
              },
            ],
          },
        ],
        value: '',
      }
    },
  }
</script>

可搜索

可以利用搜索功能快速查找選項(xiàng)

為el-select添加filterable屬性即可啟用搜索功能。默認(rèn)情況下，Select 會(huì)找出所有l(wèi)abel屬性包含輸入值的選項(xiàng)。如果希望使用其他的搜索邏輯，可以通過(guò)傳入一個(gè)filter-method來(lái)實(shí)現(xiàn)。filter-method為一個(gè)Function，它會(huì)在輸入值發(fā)生變化時(shí)調(diào)用，參數(shù)為當(dāng)前輸入值。

<template>
  <el-select v-model="value" filterable placeholder="請(qǐng)選擇">
    <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 {
        options: [
          {
            value: '選項(xiàng)1',
            label: '黃金糕',
          },
          {
            value: '選項(xiàng)2',
            label: '雙皮奶',
          },
          {
            value: '選項(xiàng)3',
            label: '蚵仔煎',
          },
          {
            value: '選項(xiàng)4',
            label: '龍須面',
          },
          {
            value: '選項(xiàng)5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

遠(yuǎn)程搜索

從服務(wù)器搜索數(shù)據(jù)，輸入關(guān)鍵字進(jìn)行查找

為了啟用遠(yuǎn)程搜索，需要將filterable和remote設(shè)置為true，同時(shí)傳入一個(gè)remote-method。remote-method為一個(gè)Function，它會(huì)在輸入值發(fā)生變化時(shí)調(diào)用，參數(shù)為當(dāng)前輸入值。需要注意的是，如果el-option是通過(guò)v-for指令渲染出來(lái)的，此時(shí)需要為el-option添加key屬性，且其值需具有唯一性，比如此例中的item.value。

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="請(qǐng)輸入關(guān)鍵詞"
    :remote-method="remoteMethod"
    :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 {
        options: [],
        value: [],
        list: [],
        loading: false,
        states: [
          'Alabama',
          'Alaska',
          'Arizona',
          'Arkansas',
          'California',
          'Colorado',
          'Connecticut',
          'Delaware',
          'Florida',
          'Georgia',
          'Hawaii',
          'Idaho',
          'Illinois',
          'Indiana',
          'Iowa',
          'Kansas',
          'Kentucky',
          'Louisiana',
          'Maine',
          'Maryland',
          'Massachusetts',
          'Michigan',
          'Minnesota',
          'Mississippi',
          'Missouri',
          'Montana',
          'Nebraska',
          'Nevada',
          'New Hampshire',
          'New Jersey',
          'New Mexico',
          'New York',
          'North Carolina',
          'North Dakota',
          'Ohio',
          'Oklahoma',
          'Oregon',
          'Pennsylvania',
          'Rhode Island',
          'South Carolina',
          'South Dakota',
          'Tennessee',
          'Texas',
          'Utah',
          'Vermont',
          'Virginia',
          'Washington',
          'West Virginia',
          'Wisconsin',
          'Wyoming',
        ],
      }
    },
    mounted() {
      this.list = this.states.map((item) => {
        return { value: `value:${item}`, label: `label:${item}` }
      })
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            this.loading = false
            this.options = this.list.filter((item) => {
              return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
            })
          }, 200)
        } else {
          this.options = []
        }
      },
    },
  }
</script>

創(chuàng)建條目

可以創(chuàng)建并選中選項(xiàng)中不存在的條目

使用allow-create屬性即可通過(guò)在輸入框中輸入文字來(lái)創(chuàng)建新的條目。注意此時(shí)filterable必須為真。本例還使用了default-first-option屬性，在該屬性打開(kāi)的情況下，按下回車(chē)就可以選中當(dāng)前選項(xiàng)列表中的第一個(gè)選項(xiàng)，無(wú)需使用鼠標(biāo)或鍵盤(pán)方向鍵進(jìn)行定位。

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="請(qǐng)選擇文章標(biāo)簽"
  >
    <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 {
        options: [
          {
            value: 'HTML',
            label: 'HTML',
          },
          {
            value: 'CSS',
            label: 'CSS',
          },
          {
            value: 'JavaScript',
            label: 'JavaScript',
          },
        ],
        value: [],
      }
    },
  }
</script>

如果 Select 的綁定值為對(duì)象類(lèi)型，請(qǐng)務(wù)必指定 value-key 作為它的唯一性標(biāo)識(shí)。

Select Attributes

Select Events

Select Slots

Option Group Attributes

Methods