場景

要實現的效果如下

官方示例程式碼實現多選

為el-select設定multiple屬性即可啟用多選，此時v-model的值為當前選中值所組成的陣列。

預設情況下選中值會以 Tag 的形式展現，你也可以設定collapse-tags屬性將它們合併為一段文字。

<template>
  <el-select v-model="value1" multiple placeholder="請選擇">
    <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="請選擇">
    <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: '選項1',
          label: '黃金糕'
        }, {
          value: '選項2',
          label: '雙皮奶'
        }, {
          value: 
 
'選項3',
          label: '蚵仔煎'
        }, {
          value: '選項4',
          label: '龍鬚麵'
        }, {
          value: '選項5',
          label: '北京烤鴨'
        }],
        value1: [],
        value2: []
      }
    }
  }
</script>

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

上面展示的實現效果首先在頁面新增一個el-select並設定其為multiple支援多選

        <el-select
          v-model="queryParams.czysz"
          placeholder="請選擇操作員"
          multiple
          clearable
          :style="{ width: '200px' }"
        >
          <el-option
            v-for="dict in czyOptions"
            :key="dict.userId"
            :label="dict.userName"
            :value="dict.userId"
          />
        </el-select>

這裡在設定下拉框的資料來源時使用的是czyOptions這個物件陣列，需要提前宣告

  data() {
    return {
      // 操作員字典
      czyOptions: [],

為了給此資料來源賦值

需要在created方法中呼叫載入下拉框資料的方法

  created() {
    this.getUserList();
  },

呼叫getUserList方法請求後臺資料

    getUserList() {
      //獲取操作員資料
      listUser(this.user).then((response) => {
        this.czyOptions = response.rows;
      });
    },

其中listUser是請求後臺資料的方法

將返回資料賦值給上面的物件陣列。

這樣通過對下拉框進行v-model資料繫結

 v-model="queryParams.czysz"

其中czysz是一個數組就能獲取到下拉框的:value="dict.userId"繫結的value值的陣列。