MENU

记一次ElementUi出坑操作

August 22, 2019 • Read: 219 • Web Program阅读设置

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

自己拼了一个组件

<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,

1.png

2.png

收获

因为在该场景中有地方两个数组的数据存在交叉的情况 我需要将两个集合的不交叉部分的数据拿出来处理 特意总结以下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]
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

2 Comments
  1. 非技术的路过。

  2. 脑阔疼,ES6还没玩转,ES7又来了