elementUI 穿梭框应用

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。该方法属于 ES7

该方法的第二个参数表示搜索的起始位置，默认为 0 。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为 -4 ，但数组长度为 3 ），则会重置为从 0 开始。

 

['a', 'b', 'c'].includes('a'); // true

['a', 'b', 'c'].includes('d'); // false

['a', 'b', NaN].includes(NaN); // true

[1, 2, 3].includes(3, 3); // false

[1, 2, 3].includes(3, -1); // true

String.prototype.includes()方法用于判断一个字符串是否包含另外一个字符串，根据情况返回 true 或 false。

 

                // fiterArr这是  筛选arr中id符合arrID数组项后的数组
                var fiterArr=[];

                // 这是一个arr数组
                var arr=[ {id:1,name:"第一项"},{id:2,name:"第二项"},{id:3,name:"第三项"}];

                // 这是一个包含由arr里面id组成的数组
                var arrId=[1,2];

                // arr.forEach(item=>{
                //   arrId.forEach(subitem=>{
                //     if(item.id==subitem){
                //       fiterArr.push(item);
                //     }
                //   })
                // })

                fiterArr=arr.filter(item=>arrId.includes(item.id));  //更好方式实现

                console.log(fiterArr);

 

 elementUI实现穿梭框

<el-transfer
              v-model="movePlan.value"
              :props="{
                key: 'id',
                label: 'jobName'
              }"
              :button-texts="['撤回','转移']"
               :titles="['原数据', '转移数据']"
              :data="movePlan.data"
              :filterable="false"
              @change="changeRight"
              >
              <span slot-scope="{ option }">{{ option.jobName }}-{{ option.jobBranch }} -{{ option.jobLevel }}</span>
              <template slot="right-footer">
                <div style="padding:5px">
                <el-select v-model="movePlan.targetPlanId"  popper-class="selectClass" placeholder="请选择考试计划">
                  <el-option v-for="item in availablePlanList"
                   :key="item.id"
                   :value="item.id"
                   :label="item.name"
                  >
                  </el-option>
                </el-select>
                  </div>
              </template>
          </el-transfer>

 changeRight(value, direction, movedKeys){
              // 当前值即右侧值（key数组）、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组    
              console.log(value, direction, movedKeys);
              if(value.length>0){
                   let fiterArr=this.movePlan.data.filter(item=>value.includes(item.id));
                   console.log("筛选==",fiterArr);
              }
      }