ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值

场景

要实现的效果如下

 

官方示例代码实现多选

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。

默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

上面展示的实现效果首先在页面添加一个el-select并设置其为multiple支持多选

这里在设置下拉框的数据源时使用的是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值的数组。