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