element-select 拥有全选属性，完美改造扩展方案

element-ui select组件官方地址Element - The world's most popular Vue UI framework

该组件，运用在现实场景中并不满足甲方的胃口。

改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀!

 

 改造完成！完整代码，造福小元们

<template>
  <div class="select-checked">
    <el-select
      :value="selected"
      :class="{ all: optionsAll }"
      multiple
      :placeholder="placeholder"
      :popper-append-to-body="false"
    >
      <el-option :value="''" label="全部" class="multiple">
        <el-checkbox v-model="optionsAll" @change="handleoptionsAllChange">
          全部
        </el-checkbox>
      </el-option>
      <el-option
        class="multiple"
        :value="item.value"
        :label="item.label"
        v-for="(item, key) in optionsData"
        :key="key"
      >
        <el-checkbox v-model="item.check" @change="handleTaskItemChange(item)">
          {{ item.label }}
        </el-checkbox>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'Select',
  components: {},
  props: {
    placeholder:{
      type:String
    },
    options: {
      type: Array,
      default(){
        return []
      }
    },
    valueData:{
      type: Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      optionsData: [],
      optionsAll: false,
      selectedOptions: []
    }
  },
  watch: {
    options: {
      handler(newVal) {
        this.optionsData = newVal
        newVal.forEach(item => {
          if (item.check) {
            this.selectedOptions.push(item.value)
          }
        })
      },
      immediate: true
      // deep: true, // 深度监听
    },
    valueData:{
      handler(newVal) {
        this.selectedOptions = newVal
        this.optionsAll=true
        this.optionsData.forEach((item)=>{
          if(this.selectedOptions.length>0){
           if(this.selectedOptions.indexOf(item.value)===-1){
             item.check=false
             this.optionsAll=false
           }else {
             item.check=true
           }
          }else {
            item.check=false
            this.optionsAll=false
          }
        })
       this.$forceUpdate()
      },
      deep: true
    }
  },
  computed: {
    selected() {

      if(this.options){
        if ( this.noRepeat(this.selectedOptions).length === this.options.length) {
          return ['']
        } else {
          return  this.noRepeat(this.selectedOptions)
        }
      }else {
        return []
      }

    }
  },
  methods: {
    noRepeat(arr) {
      //定义一个新的临时数组
      var newArr = [];
      //遍历当前数组
      for (var i = 0; i < arr.length; i++) {
        //如果当前数组的第i已经保存进了临时数组，那么跳过，
        //否则把当前项push到临时数组里面
        if (newArr.indexOf(arr[i]) === -1) {  //indexOf() 判断数组中有没有字符串值，如果没有则返回 -1
          newArr.push(arr[i]);
        }
      }
      return newArr
    },
    handleoptionsAllChange(isAll) {
      if (isAll) {
        this.selectedOptions=[]
        this.optionsData.forEach((elm, idx) => {
          elm.check = true
          this.selectedOptions.push(elm.value)
        })
      } else {
        this.optionsData.forEach((elm, idx) => {
          elm.check = false
        })
        this.selectedOptions = []
      }
      this.optionsAll = this.selectedOptions.length === this.optionsData.length
      this.$emit('selected',this.selectedOptions)
    },
    handleTaskItemChange(item) {
      // console.log(item)
      // 这里是取出下标的方法，可以封装写出去
      Array.prototype.getArrayIndex = function (obj) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] === obj) {
            return i
          }
        }
        return -1
      }
      if (!item.check) {
        this.optionsData.forEach((elm, idx) => {
          if (item.value == elm.value) {
            let index = this.selectedOptions.getArrayIndex(item.value)
            this.selectedOptions.splice(index, 1)
          }
        })
      } else {
        this.optionsData.forEach((elm, idx) => {
          if (item.value == elm.value) {
            this.selectedOptions.push(elm.value)
          }
        })
      }
      this.optionsAll = this.selectedOptions.length === this.optionsData.length
      // console.log(this.selectedOptions)
      this.$emit('selected', this.selectedOptions)
    }
  }
}
</script>

<style lang="scss">
.select-checked {
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
    content: '';
  }
  .el-checkbox {
    width: 100%;
    padding: 0 20px;
    .el-checkbox__label {
      margin-left: 5px;
    }
  }
  .el-select-dropdown__item {
    padding: 0;
  }
  .el-tag__close,
  .el-icon-close {
    display: none;
  }
  .el-tag.el-tag--info {
    background: transparent;
    border: 0;
  }

  .el-select {
    .el-select__tags {
      flex-wrap: nowrap;
      overflow: hidden;
    }
    .el-tag {
      background-color: #fff;
      border: none;
      color: #606266;
      font-size: 13px;
      padding-right: 0;
      & ~ .el-tag {
        margin-left: 0;
      }
      &:not(:last-child)::after {
        content: ',';
      }
    }
  }
}
</style>

 引用标签

 <els-select :valueData="dataForm.data" :options="datas" @selected="dataForm.data=$event" :placeholder="'请选择数据'"/>