记一次ElementUi出坑操作

最近由于不可描述之原因，项目中遇到了ElementUi 框架无法满足的需求....省略一万个字吧

自己拼了一个组件

HTML

CSS

DATA

<label>中类：</label>
<el-dropdown trigger="click" :hide-on-click='false'>
  <span class="el-dropdown-link">
    <el-input  
              placeholder="请输入内容" 
              prefix-icon="el-icon-search" 
              style='width:100%'
              size='small' 
              v-model="input2"
              @input='searchKeyword(input2)'>
    </el-input>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-checkbox v-if='allFlag' id='checkbox'  :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <hr>
    <el-checkbox-group v-model="cate2" style='padding-left:0px' @change="handleCheckedCitiesChange">
      <el-checkbox 
                   id='checkbox' 
                   v-for="item in options4" 
                   :key="item.id"
                   :label="item.id" 
                   :value="item.id" 

                   >
        @{{item.category_name}}
      </el-checkbox>
    </el-checkbox-group>
  </el-dropdown-menu>
</el-dropdown>

.el-dropdown-menu{
            transform-origin: center top;
            z-index: 2011;
            width: 200px;
            position: none!important;
                 }
        #checkbox{
            width: 200px; 
            display:block;
            line-height:30px 
        }
        #checkbox:hover{
            background:#f5f7fa;
        }  
        .el-checkbox{
            text-indent:10px;
        }  
        hr{
            margin-top: 0px;
            margin-bottom: 0px;
            border: 0;
            border-top: 1px solid #eee;
        }

//本地搜索
searchKeyword(key){
  this.options4 = this.arrZc;
  this.checkAll = this.options4.length === this.cate2.length ? true :false
  if(key==''){
    this.options4 = this.arrZc;
    this.allFlag = true;
    return;
  }
  let arr = [];
  this.options4.map(v=>{
    if(v.category_name.indexOf(key) != -1){
      arr.push(v)
    }
  });
  if(arr.length>0){
    this.allFlag = true;
    this.options4 = arr;
    this.checkAll =  arr.every(v=>this.cate2.includes(v.id)) ? true:false;
  }else{
    this.options4 = [];
    this.allFlag = false;
  }
},
  //全选选项
  handleCheckAllChange(val) {
    if(val){
      this.options4.map(v=>{
        this.cate2.push(v.id) 
      })
      //console.log(this.cate2)
    }else{
      if(this.input2 === ''){
        this.cate2 = [];
      }else{
        let c = [];
        this.options4.map(v=>c.push(v.id))  
        this.cate2 = this.cate2.concat(c).filter(v => !this.cate2.includes(v) || !c.includes(v))//es7
      }

    }
  },
    //每一个选项单击
    handleCheckedCitiesChange(value){
      if(value.length == this.options4.length){
        this.checkAll =true
      }else{
        if(this.input === ''){
          this.checkAll =false
        }else{
          this.checkAll =  this.options4.every(v=>this.cate2.includes(v.id)) ? true:false;
        }
      }
      this.changeCate2(value)
    },

input2:'',
checkAll: false,
isIndeterminate: false,
arrZc:[],
checkList:[],
allFlag:true,

收获

因为在该场景中有地方两个数组的数据存在交叉的情况我需要将两个集合的不交叉部分的数据拿出来处理特意总结以下Es7算法

  let arr1 = [1, 2, 3, 4, 5, 6, 7]
  let arr2 = [4,5,6]
  class Test {
    constructor(a, b) { 
      this.a = a;
      this.b = b;
      this.Concont()
    };
    Concont = () =>console.log(this.a.concat(this.b).filter(v => !this.a.includes(v) || !this.b.includes(v)));
  }
  let test = new Test(arr1,arr2)//(4) [1, 2, 3, 7]