因项目需要，基于element UI 再封装了 Select选择器，现记录如下：

新建vue文件，用于存储模板，同时我暴露了参数，和方法供父组件调用

<template>
  <el-select
    v-model="value2"
    multiple
    :placeholder="placeHolder"
    collapse-tags
    @visible-change="changeValue1($event,value2)"
    @change="changeSelect"
    @remove-tag="removeTag"
    class="elSelect"
    popper-class="select-popper"
    :popper-append-to-body="true"
  >
    <el-option label="全选" value="全选" @click.native="selectAll"></el-option>
    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>


<script>
export default {
  data() {
    return {
      POC: "",
      value2: []
    };
  },
  **props: { options1: Array, placeHolder: String },**
  methods: {
    selectAll() {
      if (this.value2.length < this.options1.length) {
        this.value2 = [];
        this.options1.map(item => {
          this.value2.push(item.value); //过滤options1数组，只把value给到value2数组
        });
        this.value2.unshift("全选");
      } else {
        this.value2 = [];
      }
    },
    changeSelect(val) {
      if (!val.includes("全选") && val.length === this.options1.length) {
        this.value2.unshift("全选");
      } else if (
        val.includes("全选") &&
        val.length - 1 < this.options1.length
      ) {
        this.value2 = this.value2.filter(item => {
          return item !== "全选";
        });
      }
    },
    removeTag(val) {
      if (val === "全选") {
        this.value2 = [];
      }
    },

    changeValue1: function(callback, vc) {
      console.log("回调参数" + callback);
      if (!callback) {
        if (vc != "") {
          for (var i = 0; i < this.value2.length; i++) {
            if (this.value2[i] === "全选") {
              console.log("走了吗");
              continue;
            }
            this.POC = this.POC + this.value2[i] + ",";
          }
          console.log(this.POC);
          this.$emit("toPOC", this.POC);
          this.POC = "";
        }
      }
    }
  }
};
</script>

<style lang="scss">
.elSelect {
  width: 350upx;
}
/deep/.el-input__inner {
  background-color: #ffffff;
}
/deep/.el-tag.el-tag--info {
  color: #000000;
}

/deep/.el-input__inner {
  border-radius: 0;
  border-width: 0px;
  border-color: #ff0000;
  &::placeholder {
    color: #000000;
  }

  &::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #000000;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #000000;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐 */
    color: #000000;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: #000000;
  }
}
</style>

在需要使用的地方，添加引用

import elSelect from "@/components/myComponents/elSelect";

根据自己文件路径实际填写

components中添加引用，中才能使用；

<scripts\>
	component:{
		elSelect 
}
</script>

== 或者在项目的 main.js文件中，添加全局引用 ==

import elSelect from "@/components/myComponents/elSelect";
Vue.component('elSelect ',elSelect )

父组件中传参

<elSelect
              @toPOC="getPOCCatalogmodelCode"
              :options1="toOptions1"
              :placeHolder="placeHolder1"
></elSelect>

//data中先定义参数 用来传参给子组件

export default {
data() {
	toOptions1:[],
	placeHolder1:"",
		},
//父组件写方法 用来接收子组件传参
methods:{
    getPOCCatalogmodelCode(v) {
      this.toPOC = v;//指定哪个参数用来接收子组件传参
      this.getTableData();  //执行后续自定义功能方法
    },
}

}

用到的知识点介绍

• 父组件传参给子组件的方法：
• 子组件中 用 props属性 定义要传的参数
  例如上文中的

props: { options1: Array, placeHolder: String }

• 父组件中 用 对应的 :属性名=“参数名” 来传递参数
  例如上文中的

:options1=“toOptions1” :placeHolder=“placeHolder1”

• 子组件给父组件传参的方法：

1. 子组件中 用 this.emit(‘参数名’,参数)
   例如上文中的

this.$emit(“toPOC”, this.POC);

2. 父组件中用同样的命名接收参数 注意前面有@符号
   例如上文中的

@toPOC=“getPOCCatalogmodelCode”

再写一个方法 接收参数

getPOCCatalogmodelCode(v) {
this.toPOC = v;//指定哪个参数用来接收子组件传参
this.getTableData(); //执行后续自定义功能方法
},

• 下拉列表中 全选和反选的写法，方法很多，注重思路