dy-admin-manager/src/components/select-all/index.vue

<template>
  <div class="select-all">
    <el-select
      multiple
      clearable
      filterable
      collapse-tags
      class="select"
      v-bind="{...$attrs, ...$props}"
      v-on:input="value => $emit('input', value)"
      ref="select"
    >
      <slot/>
    </el-select>
    <el-button @click="selectAll" class="btn">
      全选
    </el-button>
  </div>
</template>
<script>
export default {
  name: 'select-all',
  mounted() {
    console.log(this)
  },
  methods: {
    selectAll() {
      const { options } = this.$refs.select
      const values = options.filter(item => !item.disabled && item.value).map(item => item.value)
      this.$emit('input', values)
    }
  }
}
</script>
<style lang="less" scoped>
.select-all{
  display: flex;
  .select{
    flex: 1;
    /deep/ .el-input__inner{
      border-radius: 4px 0 0 4px;
    }
  }
}
.btn{
  width: 50px;
  padding: 10px;
  border-left: none;
  border-radius: 0 4px 4px 0;
}
</style>