filter的用法与使用场景：筛选数据

//this.allCollectorList：后台给定的所有可供选择数据
//this.collectorData：目前已经存在选中列表中的数据



//目前已经存在选中列表中的数据id
getSelIdList() {
   let eIdList = []
   this.collectorData.forEach(row => {
      eIdList.push(row.id)
   })
   return eIdList
},


//在中的数据列表中删除目前已经存在的数据，就是余下全部数据
filterCollec() {
  let eIdList = this.getSelIdList()
  this.allCollectorData = this.allCollectorList.filter(row => {
    return eIdList.indexOf(row.id) == -1
  })
},

 1、使用场景：筛选数据后台给了多选框的数据列表，前端通过选中和反选，传值给后台多选框的id，记录实际的XX类型

typeList = [
    {
        "id": "1",
        "code": "1",
        "name": "通讯",
        "type": 1,
        "status": 1,
        "remark": null,
        "pid": null,
        "ext1": "",
        "ext2": null,
        "ext3": null,
        "sort": 1
    },
    {
        "id": "4",
        "code": "4",
        "name": "微型器",
        "type": 1,
        "status": 1,
        "remark": null,
        "pid": null,
        "ext1": "",
        "ext2": null,
        "ext3": null,
        "sort": 3
    },
    {
        "id": "28",
        "code": "5",
        "name": "多功能表",
        "type": 1,
        "status": 1,
        "remark": null,
        "pid": null,
        "ext1": "",
        "ext2": null,
        "ext3": null,
        "sort": 4
    },
    {
        "id": "612",
        "code": "55",
        "name": "单电表",
        "type": 1,
        "status": 1,
        "remark": null,
        "pid": null,
        "ext1": "",
        "ext2": null,
        "ext3": null,
        "sort": 5
    },
    {
        "id": "613",
        "code": "56",
        "name": "三相表",
        "type": 1,
        "status": 1,
        "remark": null,
        "pid": null,
        "ext1": "",
        "ext2": null,
        "ext3": null,
        "sort": 6
    }
]

<el-form-item label="设备类型：">
            <el-checkbox-group v-model="formData1.airSwitchTypeAry">
              <el-checkbox :key="i" v-for="(item, i) in typeList" :label="item.code">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>





watch: {
      'formData.airSwitchTypeAry': function (val, oldval) {
        if (val.length > 0) {
          let ids = this.typeList
            .filter((it) => val.indexOf(it.code) > -1)
            .map((it) => it.id)
          console.log(111, ids)
          this.modelList = this.allModelList.filter(
            (it) => ids.indexOf(it.pid) > -1
          )
        } else {
          this.modelList = this.allModelList
        }
      }
    }

2、使用场景：两个table列表中的数据实现穿梭框功能（筛选数据实现两个表格中的数据相互交换）