说明:列表中字段A的值由多个值组成,但是后端返回的是这多个值的id字符串,需要前端拿着多个id组成的字符串去另一个接口数据源匹配展示
列表后端返回多个字符串如下:
sectorName: "1899292545382895618,1907311191514636289,1907311228177047553"cusType: "4,2",
数据源1(模拟数据):
sectorList: [{id:1,name:'测试1'},{id:2,name:'测试2'},{id:3,name:'测试3'},{id:4,name:'测试4'}
],
数据源2(模拟数据):
cusTypeList: [{dictKey:1,dictValue:'A'},{dictKey:2,dictValue:'B'},{dictKey:3,dictValue:'C'},{dictKey:4,dictValue:'S'}
],
列表接口请求成功之后匹配方法如下:
api.querybasicRftTemplateRetrieveList(params).then((res) => {if(res.data.data == null){this.tableData = []}else{this.tableData = res.data.data.records;this.tablePage.totalElements = res.data.data.total;this.tableData.map((item) => {item.fieldType = String(item.fieldType);// 匹配行业名称if (item.sectorName) {let sectorIdArr = item.sectorName.split(","); // 分割行业 IDitem.sectorNameStr = this.sectorList.filter(sector => sectorIdArr.includes(String(sector.id))).map(sector => sector.name).join(","); // 拼接成字符串} else {item.sectorNameStr = "";}// 匹配客户类型名称if (item.cusType) {let cusTypeArr = item.cusType.split(","); // 分割客户类型 IDitem.cusTypeNameStr = this.cusTypeList.filter(cus => cusTypeArr.includes(String(cus.dictKey))).map(cus => cus.dictValue).join(","); // 拼接成字符串} else {item.cusTypeNameStr = "";}})this.getUsersList(this.tableData);}this.loading = false;}).catch(() => {this.loading = false;})
🔍 代码解析
-
item.sectorName.split(",")
-
将
sectorName
(字符串"1,2,3"
)拆分为数组["1", "2", "3"]
。
-
-
this.sectorList.filter(sector => sectorIdArr.includes(String(sector.id)))
-
过滤
sectorList
,只保留id
在sectorIdArr
里的项。
-
-
.map(sector => sector.name).join(",")
-
提取
name
并用,
连接成字符串。
-
客户类型 cusTypeNames
处理逻辑类似。
列表直接使用:sectorNameStr 字段渲染即可
效果如下:
至此完成!!!
测试有效!!!感谢支持!!!