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);
              }
      }