ElementUI 多選+遠程搜索

一、概述

因項目要求，需要增加一個模糊搜索，可以選擇多個，數量不限制。

官方鏈接：https://element.eleme.cn/#/zh-CN/component/select#select-attributes

 

二、demo

test.vue

<template>
  <div>
    <el-select
      v-model="value"
      multiple
      filterable
      collapse-tags
      clearable
      placeholder="請輸入關鍵詞"
      :loading="loading">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.phone }}</span>
      </el-option>
    </el-select>
    <div>
      <div style="height: 200px"></div>
      <div style="display: inline-block">當前選擇的id是:</div>
      <div v-for="(item,index) in value" :key="item.id" style="display: inline-block">
        <span>{{item}}</span>
        <span v-if="index!=value.length-1">，</span>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        // 選項列表
        options: [
          {
            id:1,
            name:'林志玲',
            phone:'13435567541'
          },
          {
            id:2,
            name:'柳巖',
            phone:'13435567542'
          },
          {
            id:3,
            name:'徐鼕鼕',
            phone:'13435567543'
          },
          {
            id:4,
            name:'景甜',
            phone:'13435567544'
          },
          {
            id:5,
            name:'韓雪',
            phone:'13435567545'
          },
        ],
        value: [], // 選中的值
        loading: false,
      }
    },
    mounted() {
    },
    methods: {
    }
  }
</script>

 

效果如下：

 

注意，因爲要求是可以選擇多個，如果選擇過多，輸入框會被拉長，因此用數字表示，比如+1這種方式。

演示的代碼，數據是寫死的。實際項目中，是請求api獲取的，稍微改動一下，即可使用。