elementUI中checekBox实现全选和反选以及实现在input中输入空格出现label分割

<el-checkbox :indeterminate="isIndeterminate" v-model="Reverseflg" @change="Reverse">反选</el-checkbox>

//反选
      Reverse(){
        //记录当前被选中的值给一个空数组
        let idx;//记录当前是不是存在这个值
        let currArr = []; //记录当前的选择的数组
        for(let item of this.cities){
          idx = this.checkedCities.includes(item) //如果不存在当前的值就将该值放到最新的空数组里
          if(!idx){
            currArr.push(item)
          }
        }
        this.checkedCities = currArr
      }

<template>
  <div>
    <!-- <label class="labelname">{{labelname}}</label> -->
    <div class="inputbox">
      <div class="arrbox">
        <div v-for="(item,index) in labelarr" :key="index" class="spanbox">
          <span>{{item}}</span>
          <i class="spanclose" @click="removeitem(index,item)"></i>
        </div>
        <input placeholder="敲击空格多条输入" size="5" v-model="currentval" @keyup.space="addlabel" class="input" type="text" />
      </div>
    </div>
    <code>{{labelarr.join(",")}}</code>
    <!-- 常用label展示 -->
    <div></div>
  </div>
</template>

<script>
  export default {
    name: 'enterlabel',
    props: {
      parentarr: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data() {
      return {
        currentval: '',
        labelarr: []
      }
    },
    watch: {
      labelarr(old, cur) {
        this.$emit('on-change', this.labelarr)
      },
      parentarr() {
        if (this.parentarr.length > 0) {
          this.labelarr = []
          for (let i = 0; i < this.parentarr.length; i++) {
            this.labelarr.push(this.parentarr[i])
          }
        } else {
          this.labelarr = []
        }
      }
    },
    methods: {
      // 移除标签
      removeitem(index, item) {
        this.labelarr.splice(index, 1)
      },
      // input回车加入labelarr中
      addlabel() {
        let count = this.labelarr.indexOf(this.currentval)
        if (count === -1) {
          this.labelarr.push(this.currentval)
        }
        this.currentval = ''
      }
    }
  }
</script>

<style>
  .inputbox {
    background-color: white;
    font-size: 12px;
    border: 1px solid #dcdee2;
    border-radius: 6px;
    margin-bottom: 18px;
    padding: 6px 1px 1px 6px;
    text-align: left;
    font-size: 0;
    margin-bottom: 0;
  }

  .input {
    font-size: 14px;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    width: auto !important;
    max-width: inherit;
    min-width: 80px;
    vertical-align: top;
    height: 30px;
    color: #34495e;
    margin: 2px;
    line-height: 30px;
  }

  .arrbox {
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 6px 1px 1px 6px;
    text-align: left;
    font-size: 0;
  }

  .spanbox {
    line-height: 30px;
    margin: 2px;
    padding: 0 10px;
    background-color: #1abc9c;
    color: white;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    overflow: hidden;
    transition: 0.25s linear;
  }

  .spanbox:hover {
    padding: 0px 17px 0 3px;
  }

  .spanclose {
    color: white;
    padding: 0 10px 0 0;
    cursor: pointer;
    font-size: 12px;
    position: absolute;
    right: -3px;
    text-align: right;
    text-decoration: none;
    top: 0;
    width: 100%;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    filter: "alpha(opacity=0)";
    transition: opacity 0.25s linear;
    font-style: normal;
  }

  .spanbox:hover .spanclose {
    padding: 0 10px 5px 0;
    opacity: 1;
    -webkit-filter: none;
    filter: none;
  }

  .spanclose:after {
    content: "x";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 27px;
  }
</style>