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
    }
]


            
              {{ item.name }}
            
          





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列表中的数据实现穿梭框功能(筛选数据实现两个表格中的数据相互交换)

 

你可能感兴趣的:(js,javascript)