Vue 下拉多选

1 定义组件 在components文件夹下创建SearchInput文件夹 下创建文件index.vue

<template>
  <el-select v-model="childSelectedValue"
             :filterable="remote"
             multiple
             :loading="loading"
             :remote="remote"
             :size="size"
             :remote-method="remoteMethod"
             :clearable="clearable"
             @change="handleChange"
             @clear="handleClear"
             @focus="handleFocus"
             :style="{width: '93%'}"
             :placeholder="placeholder">
    <el-option
      v-for="item in optionSource"
      :key="item[valueKey]"
      :label="item[labelKey]"
      :value="item[valueKey]">
    </el-option>
 
    <el-pagination
      small
      layout="prev, pager, next"
      @current-change="changeNumber"
      :hide-on-single-page="true"
      :page-size="paginationOption.pageSize"
      :current-page="paginationOption.pageNum"
      :pager-count="paginationOption.pagerCount"
      :total="paginationOption.total">
    </el-pagination>
  </el-select>
</template>
 
<script>
 
export default {
  name: 'SearchInput',
  props: {
    //此参数只是为了父组件实现 v-model指令接受参数用，子组件中无实际意义
    // 在子组件中通过监听childSelectedValue值，来触发 input 事件，实现子父组件数据绑定
    value:{
      type:String,
      default: ''
    },
    valueKey:{//传入的option数组中，要作为最终选择项的键值名称
      type:String,
    },
    labelKey:{//传入的option数组中，要作为显示项的键值名称
      type:String
    },
    clearable    :{//是否支持清除，默认支持
      type:Boolean,
      default:true
    },
    remote:{//是否支持远程搜索，默认支持
      type:Boolean,
      default:false
    },
    size:{//组件尺寸，配置项同select  String | medium/small/mini
      type:String,
      default:'medium'
    },
    loading:{//远程数据加载状态显示
      type:Boolean,
      default:false
    },
    placeholder    :{
      type:String,
      default:'请输入关键词'
    },
    optionSource:{//下拉框组件数据源
      type:Array,
      required:true
    },
    paginationOption:{//分页配置项
      type:Object,
      default:function () {
        return {
          pageSize:5,//每页显示条数  6条刚好
          pageNum:1,//当前页
          pagerCount:5,//按钮数，超过时会折叠
          total:10 //总条数
        }
      }
    }
  },
  data () {
    return {
      childSelectedValue:this.value,
 
    }
  },
  watch:{
    //监听子组件中选择的值得变化，每当选择一个项后，触发input事件，
    // 将子组件中选择的值通过input事件传递给父组件，实现父组件中v-model绑定的值的双向绑定
    childSelectedValue(val){
      this.$emit("input",val);
    },
    value(val){
      if(val!=null && val.length<1){
        this.childSelectedValue = '';
      }
    }
  },
  mounted(){
  },
  methods:{
    //子组件分页器，页码选择事件，父组件中监听子组件的 pageNationChange 事件，获取当前页码
    changeNumber(val){
      //此处的val是页码
      this.$emit("pageNationChange",val);
    },
    // 远程调用方法，在父组件中实现远程方法
    remoteMethod(val){
      if(val!=null && val.length>0){
        //只有输入的字符串长度大于1时，触发
        this.$emit("remote-method",val);
      }else{
        this.childSelectedValue = ' '
      }
    },
    //使组件支持change事件
    handleChange(val){
      this.$emit("change",val);
    },
    //使组件支持clear事件
    handleClear(val){
      this.$emit("clear",val);
    },
    //解决远程搜索无结果时，显示清除按钮问题
    handleFocus(){
      if(this.childSelectedValue.length<1){
        this.childSelectedValue = ''
      }
    }
  }
}
</script>
 
 
<style scoped>
 
</style>

2 全局注册组件

main.js

// 搜索分页加载
import PaginationSelect from '@/components/SearchInput'
Vue.component('PaginationSelect', PaginationSelect)

3 引用

<el-form-item label="管理员"  >
          <pagination-select
            @pageNationChange="pageNationChange"
            @change="getAthIdsAdd"
            :optionSource="athListAllByLocal"
            v-model="form.adminId"
            labelKey="label"
            valueKey="value"
            :paginationOption="setSelectPage"
          >
          </pagination-select>
        </el-form-item>
        
        <el-form-item label="管理员ID" prop="adminId">
          <el-input v-model="form.adminId" placeholder="请输入管理员ID" />
</el-form-item>

定义属性

data() {
    return {
        //分页信息
      setSelectPage:{
        pageSize:6,//每页显示条数  3条刚好
        pageNum:1,//当前页
        pagerCount:5,//按钮数，超过时会折叠
        total:0 //总条数
      },
      athListAllByLocal:[]
    }
}

初始化数据

  created() {
    this.getAthListLocal(this.setSelectPage);
  },

定义方法

 //下拉列表分页的点击的事件
    pageNationChange(val){
      //设置当前页为点击的页
      this.setSelectPage.pageNum = val;
      //重新调用分页查询的方法
      this.getAthListLocal(this.setSelectPage);
    },
    //获取下拉框中的选择ID
    getAthIdsAdd(val){
      
      var names = "";
      for(let i=0;i<=val.length-1;i++){
        this.athListAllPaged.find((item)=>{
          if(item.id === val[i]){
            names+=item.aname+",";
          }
        });
      }
      console.log(names);
      this.fanganform.ppersons = names;
    },
    //获取用户信息
    getAthListLocal(setSelectPage){
      this.athListAllByLocal=[];
      getUserInfo(setSelectPage).then(response => {
        response.rows.forEach((v,k) => {
          //下拉列表数据源绑定
           this.athListAllByLocal.push({
            label:v.userName,
            value:v.userId
          })
        });
          //绑定总记录数
          this.setSelectPage.total = response.total;
          //
          if(this.athListAllPaged.length===0){
            this.athListAllPaged=response.rows;
          }else {
            //追加数据
            for(let i = 0;i<response.rows.length;i++){
              this.athListAllPaged.push(response.rows[i]);
            }
          }
        });
    },