ElementUI的el-select怎樣實現下拉多選並實現給下拉框賦值和獲取值

場景

要實現的效果如下

 

 

 

官方示例代碼實現多選

為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值的數組。